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
<p class="underline underline-offset-4">
  This text has an underline with an offset of 4 pixels.
underline with an offset

You can also combine this with other text decoration utilities like decoration-{color} to change the underline color.

<p class="underline underline-offset-2 decoration-blue-500">
  This text has a blue underline with an offset of 2 pixels.
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

    <p class="mb-4">
        Web development is constantly evolving...

    <h2 class="text-2xl font-semibold my-3 underline underline-offset-4 decoration-2 decoration-green-400">
        1. Rise of AI-powered Tools

    <p class="mb-4">
        Artificial Intelligence is making its way into web development...

    <!-- More content... -->
Underline Offset real use
saim ansari
saim ansari

I'm Saim Ansari, a full-stack developer with 4+ years of hands-on experience who thrives on building web applications that leave a lasting impression. When it comes to tech, I'm particularly adept at Laravel, React, Tailwind CSS, and the Tall Stack