Tailwind Text Decoration

Text decoration in Tailwind goes way beyond slapping underlines on links. You can control the decoration type (underline, strikethrough, wavy lines), color, thickness, style, and offset. Most developers stop at underline and line-through, but there's a lot more you can do once you know the full system.

How to apply Tailwind Text Decoration

Start here before getting fancy:

• underline - Links in body text, emphasized content
• line-through - Original prices, deleted content, completed tasks
• overline - Almost never (decorative headings occasionally)
• no-underline - Navigation links, removing default link styles

The overline utility exists but I've maybe used it five times ever. It's one of those things that sounds useful but rarely fits real designs.

<p class="underline">This is an underlined text.</p>
<p class="overline">This is an overline text.</p>
<p class="line-through">This is a text with line through .</p>
<p class="no-underline">This is a text with no underline.</p>

Preview

Decoration Style (Wavy Lines and More)

Your decoration doesn't have to be solid:

<p class="underline decoration-solid">Solid (default)</p>
<p class="underline decoration-double">Double line</p>
<p class="underline decoration-dotted">Dotted line</p>
<p class="underline decoration-dashed">Dashed line</p>
<p class="underline decoration-wavy decoration-red-500">Wavy red line</p>

Wavy underlines are perfect for:

• Fake spell-check UI
• Highlighting errors or warnings
• Playful designs

<p class="text-gray-800">
  The word <span class="underline decoration-wavy decoration-red-500">recieve</span> 
  is misspelled.
</p>

Preview

Double underlines work for legal docs or formal emphasis. Dotted/dashed indicate external links or provisional content.

Decoration Thickness

Control how thick the line appears:

<p class="underline decoration-1">Thin (1px)</p>
<p class="underline decoration-2">Medium (2px)</p>
<p class="underline decoration-4">Thick (4px)</p>
<p class="underline decoration-8">Very thick (8px)</p>

Thick underlines on headings create visual impact:

<h1 class="text-5xl font-bold underline decoration-blue-500 decoration-8 underline-offset-8">
  Bold Statement
</h1>

Preview

For body links, stick to decoration-1 or decoration-2. Thicker lines look weird at small sizes.

Underline Offset (Fix Descender Clipping)

Controls the gap between text and underline:

<p class="text-2xl underline underline-offset-2">Close to text</p>
<p class="text-2xl underline underline-offset-4">Medium gap</p>
<p class="text-2xl underline underline-offset-8">Large gap</p>

The problem: letters like g, j, p, q, y have descenders that hang below the baseline. If your underline is too close, it clips through them:

<!-- Bad - underline cuts through letters -->
<p class="text-3xl underline underline-offset-1">
  Typography problems
</p>

<!-- Fixed -->
<p class="text-3xl underline underline-offset-4">
  Typography problems
</p>

Preview

My rule:

• Small text: underline-offset-2 or underline-offset-4
• Large text: underline-offset-4 or underline-offset-8

Hover States

Text decoration shines in interactive states:

<!-- Reveal underline on hover -->
<a href="#" class="no-underline hover:underline">
  Hover to reveal
</a>

<!-- Hide underline on hover -->
<a href="#" class="underline hover:no-underline">
  Hover to hide
</a>

<!-- Change color on hover -->
<a href="#" class="underline decoration-gray-300 hover:decoration-blue-600">
  Color transition
</a>

<!-- Thicken on hover -->
<a href="#" class="underline decoration-2 hover:decoration-4 transition-all">
  Gets thicker
</a>

Preview

Responsive Decoration

Change decoration at different screen sizes:

<!-- Underline on mobile, clean on desktop -->
<a href="#" class="underline md:no-underline hover:underline">
  Mobile-friendly nav link
</a>

<!-- Adjust thickness responsively -->
<h2 class="underline decoration-2 md:decoration-4 lg:decoration-8">
  Scales with breakpoint
</h2>

Preview

I use mobile underlines in navigation. On small screens, underlines clarify what's clickable. On desktop, hover states are enough.

Real Examples

Strikethrough Prices

<div class="flex items-center gap-3">
  <span class="text-2xl font-bold">$29.99</span>
  <span class="text-xl line-through decoration-red-500 text-gray-500">
    $49.99
  </span>
  <span class="bg-red-100 text-red-700 text-sm px-2 py-1 rounded font-semibold">
    40% OFF
  </span>
</div>

Preview

Red strikethrough makes the discount obvious.

Todo Completion

<ul class="space-y-2">
  <li class="flex items-center gap-2">
    <input type="checkbox" checked />
    <span class="line-through text-gray-400">Finish project</span>
  </li>
  <li class="flex items-center gap-2">
    <input type="checkbox" />
    <span>Review code</span>
  </li>
</ul>

Preview

Completed items fade and get crossed off.

Navigation Links

<nav class="flex gap-6">
  <a href="#" class="no-underline hover:underline font-medium">Home</a>
  <a href="#" class="no-underline hover:underline font-medium">About</a>
  <a href="#" class="no-underline hover:underline font-medium">Contact</a>
</nav>

Preview

Clean until hover. Works for headers, footers, sidebars.

Accent Heading

``html

Featured Products

### Preview

<div class="rounded-xl overflow-auto bg-gray-100 p-8">
<h2 class="text-4xl font-bold inline-block underline decoration-blue-500 decoration-4 underline-offset-8">
  Featured Products
</h2>
</div>


Thick colored underline adds visual weight without extra markup.


## External Link Indicator

```html
<p>
  Read the 
  <a href="https://example.com" class="text-blue-600 underline decoration-dotted hover:decoration-solid">
    full documentation
  </a> 
  for details.
</p>

Preview

Dotted underline signals external links, switches to solid on hover.

Spell Check UI

<p class="text-gray-800">
  Please ensure you 
  <span class="underline decoration-wavy decoration-red-500">recieve</span> 
  our confirmation email.
</p>

Preview

Wavy red underlines mimic native spell-check.

Common Mistakes

• Too Much Offset on Small Text

<!-- Looks broken -->
<p class="text-sm underline underline-offset-8">
  Gap is too big
</p>

Scale offset with font size. Large offsets on small text look like a rendering bug.

• Forgetting Descenders

<!-- Underline clips through letters -->
<h1 class="text-5xl underline underline-offset-1">Typography</h1>

Test with words containing g, j, p, q, y. Increase offset if they clash.

• Low Contrast Decoration

<!-- Hard to see -->
<div class="bg-blue-500">
  <a href="#" class="text-white underline decoration-blue-400">
    Low contrast
  </a>
</div>

<!-- Better -->
<div class="bg-blue-500">
  <a href="#" class="text-white underline decoration-white">
    High contrast
  </a>
</div>

Decoration needs contrast with its background, not just the text.

• Hover Layout Shift

<!-- Jumps on hover - underline adds space -->
<a href="#" class="no-underline hover:underline">Jumpy</a>

<!-- Smooth - underline always there, just transparent -->
<a href="#" class="underline decoration-transparent hover:decoration-current">
  Smooth
</a>

Use transparent decoration instead of toggling to avoid layout shift.

• Over-decorating: Pick one decoration type. Two if you really know what you're doing. Three is visual noise.

When NOT to Use Decoration

Don't rely on decoration for:

• Important content (some assistive tech ignores it)
• Anything users need to copy/paste (decoration doesn't copy)
• Interactive elements beyond links (buttons should look like buttons)
• Critical information (combine with semantic HTML)

Conclusion

Most people stop at underline and line-through, missing out on color, thickness, style, and offset controls. These utilities solve real design problems, from subtle link styling to strikethrough prices to spell-check UI. Start with the basics (underline, line-through), then layer in color and hover states. Once you're comfortable, experiment with thickness, offset, and wavy styles. And remember: decoration is visual enhancement. If the content matters semantically (deletions, insertions, emphasis), use proper HTML elements with Tailwind styling on top.

Tailwind Text decoration Class Table

Worth Reading

• Tailwind Text Decoration Thickness

• MDN: text-decoration - CSS fundamentals

Windframe Tailwind blocks

Landing page