Text Underline in Tailwind CSS

Updated: December 18, 2023 By: Khue Post a comment

In Tailwind CSS, you can add an underline to text by using the underline utility. You can also control the offset (the distance between text and the line) of a text underline by using underline-offset-{option} classes. {option} can be: auto, 0, 1, 2, 4, 8.

Example 1


The code:

<body class="p-20">
    <h1 class="underline text-5xl">Hello World</h1>
    <h1 class="underline underline-offset-8 text-4xl">Goodbye World</h1>
    <br />
    <p class="underline underline-offset-0 text-indigo-500">Have a nice day</p>

Example 2

This example demonstrates how to show an underline when hovering over a link.


The code:

<body class="p-20">
    <a class="text-blue-600 text-4xl hover:underline" href="https://www.slingacademy.com">Welcome to
        Sling Academy</a>

That’s it. Happy coding & have a nice day!