Text Underline in Tailwind CSS
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 a link.
Preview:
The code:
<body class="p-20">
<a class="text-blue-600 text-2xl hover:underline" href="https://www.kindacode.com">Welcome to
KindaCode.com</a>
</body>Further reading:
- Tailwind CSS: Create a User Card with Circle Avatar
- Text Shadows in Tailwind CSS
- Tailwind CSS: How to Create Gradient Text
- How to create cut-out text effect with Tailwind CSS
- How to Create a Fixed Sidebar with Tailwind CSS
- Tailwind CSS: How to Create a Sticky/Affix NavBar
You can also check out our CSS category page for the latest tutorials and examples.
Subscribe
0 Comments
You May Also Like
