How to Make Cool Underlines for Links with TailwindCSS

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:

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