Aquiles Carattino

How to Make Cool Underlines for Links with TailwindCSS

First published:

Last Edited:

Number of edits:

Making underlines for links instead of changing the color of the letters improves a lot the readability of documents. However, underlining itself does not allow to control the thickness of the line nor its color. There are two ways to achieve control on how the underlining looks like: using the boxShadow property of TailwindCSS , or tuning the background image.

Box Shadow

Tailwind provides some basic shadows, but if we want to add custom shadows to our links, we must edit the tailwind.config.js file, and add the following:

    theme: {
        extend: {
            boxShadow: {
                link: '0 -4px 0 0 rgba(178, 245, 234, .7) inset',
            },
    },
}

The syntax is exactly what box-shadow takes. Now, if we want to underline a link, we can use the following in the HTML:

<a href="target.html" class="no-underline shadow-link">target</a>

We can also apply it globally to all links, by adding the following to the style.css file:

@tailwind base;

a {
    @apply no-underline shadow-link;
}

@tailwind components;

Background Image

Using a background image as an underline requires slightly more tuning but allows for much more stunning results. We can add to style.css after the @tailwind utilities line:

@layer base {
    a {
        background-image: linear-gradient(to top, orange, yellow, transparent);
        background-position: 0 110%;
        background-repeat: no-repeat;
        background-size: auto .75rem;
    }
}

We use the @layer base to create a global style that will be applied to all the a tags. The rest is CSS code to create a linear gradient that goes from orange, to yellow to transparent, from bottom to top. The result would like in the image below:

How does a fancy underline looks like

So, if you see those fancy underlines and want to create them with Tailwind, you know now where to start!


Backlinks

These are the other notes that link to this one.

Newsletter

Join my experiment of better thinking and interesting discussions
By subscribing, you agree with Revue’s Terms and Privacy Policy.
Aquiles Carattino
Aquiles Carattino
This note you are reading is part of my digital garden. Follow the links to learn more, and remember that these notes evolve over time. After all, this website is not a blog.
© 2021 Aquiles Carattino
Privacy Policy
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.