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
Screenshot:
The code:
<body class="p-20">
<h1 class="underline text-5xl">Hello World</h1>
<br/>
<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>
</body>Example 2
This example demonstrates how to show an underline when hovering over a link.
Preview:
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>
</body>That’s it. Happy coding & have a nice day!
