Tailwind CSS - Text Underline Offset

Tailwind CSS provides the text-underline-offset class to add an underline offset to any text element which is similar to CSS text-underline-offset property.

Syntax

<span class="text-underline-offset-{size}">{text}</span>

• {size} can be none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl, 10xl to specify the size of underline offset.
• {text} specifies the text for which underline offset should be added.

Example

<h2 class="text-4xl font-bold">
  Text with Underline Offset
</h2>
<p class="text-lg text-underline-offset-md">
  This is a sample text with underline offset.
</p>

Output

Explanation

• In the example, the text-lg class set the font size of the paragraph.
• The text-underline-offset-md class sets the underline offset size to md for the paragraph.
• This will add an underline offset of intermediate size to the text.

Use

Use this class wherever you want to add an underline offset to the text element.

Important Points

• This class requires the appearance-none utility to work properly.
• This class only adds an underline offset and does not add an actual underline.
• The size of the underline offset can be increased or decreased as per the requirement.

Summary

• Use the text-underline-offset-{size} class to add an underline offset to any text element.
• {size} can be none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl, 10xl to specify the size of underline offset.
• This class does not add an actual underline to the text.