Text decoration

Tailwind CSS Text decoration

Use responsive text decoration utilities with Tailwind Elements. Add flair to your text with decoration styles like underline, overline, and line-through.

Basic example

Use .underline, .no-underline, and .line-through utilities to control how text is decorated.

Paragraph with underline class.

Paragraph with overline class.

Paragraph with line-through class.

Paragraph with no-underline class.

HTML

        
            
        <p class="underline">This text will be underlined.</p>

Color of the underline

By default, the underline will be the same color as the text. But you can customize the color of the underline using the .decoration-{color} utility.

This text will be underlined in red.

This text will be underlined in green.

HTML

        
            
        <p class="underline decoration-red-500">
          This text will be underlined in red.
        </p>
        <p class="underline decoration-green-500">
          This text will be underlined in green.
        </p>

Underline on hover

You can also use the .hover:underline class to apply the underline only when the element is hovered over.

This text will be underlined only when hovered over.

HTML

        
            
        <p class="hover:underline">
          This text will be underlined only when hovered over.
        </p>

Underline offset

For controlling the offset of the underline, you can use the .underline-offset-{number} utility class.

This text will have an underline offset of 2px.

This text will have an underline offset of 4px.

This text will have an underline offset of 8px.

HTML

        
            
        <p class="underline underline-offset-2">
          This text will have an underline offset of 2px.
        </p>
        <p class="underline underline-offset-4">
          This text will have an underline offset of 4px.
        </p>
        <p class="underline underline-offset-8">
          This text will have an underline offset of 8px.
        </p>