DEV Community

Cover image for How to Use Text Underline Offset in Tailwind CSS
saim
saim

Posted on • Originally published at larainfo.com

5

How to Use Text Underline Offset in Tailwind CSS

To use text underline offset in Tailwind CSS, you can use the underline-offset-{amount} utility class. Here's how to apply it:

  1. Add the underline class to enable underlining.
  2. 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.

![underline with an offset](https://larainfo.com/wp-content/uploads/2024/07/Tailwind-Play-53-1.png)
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>


Enter fullscreen mode Exit fullscreen mode

offset decoration
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>


Enter fullscreen mode Exit fullscreen mode

Underline Offset real use
View Demo

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs