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.

    theme: {
extend: {
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 {
}

@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!