To use text underline offset in Tailwind CSS, you can use the underline-offset-{amount} utility class. Here's how to apply it:
- Add the underline class to enable underlining.
- Use underline-offset-{amount} to set the offset. The available amounts are:
underline-offset-auto
- underline-offset-0
- underline-offset-1
- underline-offset-2
- underline-offset-4
- underline-offset-8 ```html
This text has an underline with an offset of 4 pixels.
You can also combine this with other text decoration utilities like `decoration-{color}` to change the underline color.
```html
<p class="underline underline-offset-2 decoration-blue-500">
This text has a blue underline with an offset of 2 pixels.
</p>
You can can use in Article Headings with Decorative Underline eg.
<article class="max-w-2xl mx-auto">
<h1 class="text-3xl font-bold mb-4 underline underline-offset-8 decoration-4 decoration-blue-500">
The Future of Web Development
</h1>
<p class="mb-4">
Web development is constantly evolving...
</p>
<h2 class="text-2xl font-semibold my-3 underline underline-offset-4 decoration-2 decoration-green-400">
1. Rise of AI-powered Tools
</h2>
<p class="mb-4">
Artificial Intelligence is making its way into web development...
</p>
<!-- More content... -->
</article>
Top comments (0)