Text decoration

Tailwind CSS Text decoration

Use responsive text decoration utilities with TW 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>

Text decoration

Tailwind CSS Text decoration

Basic example

Color of the underline

Underline on hover

Underline offset

Access restricted

To view this section you must have an active PRO account

Text decoration

Tailwind CSS Text decoration

Basic example

Color of the underline

Underline on hover

Underline offset

Related resources