Tailwind CSS Text Decoration Cheatsheet

Complete reference for text decoration utilities in Tailwind v4.
Click any utility to copy the class name.

Quick Navigation

Decoration Line Decoration Style Decoration Thickness Underline Offset Decoration Color Usage Examples

Text Decoration Line

Control which type of text decoration line is applied to an element.

Text Decoration Style

Control the style of text decoration lines (solid, double, dotted, dashed, wavy).

Note: Decoration style classes require a text decoration line to be visible. Combine with underline, overline, or line-through.

Text Decoration Thickness

Control the thickness of text decoration lines.

Thickness Comparison:

1px2px4px8px

Underline Offset

Control the distance between text and its underline decoration.

Offset Comparison:

0px1px2px4px8px

Text Decoration Color

Set the color of text decoration lines independently from the text color.

Special Values

Color Palette (500 shade examples)

Shade variants: Each color has shades from 50 to 950.
Example: decoration-blue-50, decoration-blue-100, ..., decoration-blue-950

Common Usage Patterns

Styled Link Underline

<a class="underline
         decoration-primary
         decoration-2
         underline-offset-4
         hover:decoration-wavy">
  Styled link
</a>

Styled link (hover me)

Strikethrough Price

<span class="line-through
             decoration-red-500
             decoration-2
             text-gray-400">
  $99.00
</span>

$99.00

Highlight with Wavy Underline

<span class="underline
             decoration-wavy
             decoration-yellow-500
             decoration-2
             underline-offset-2">
  Important text
</span>

Important text

Double Underline Emphasis

<span class="underline
             decoration-double
             decoration-4
             underline-offset-4">
  Emphasized text
</span>

Emphasized text

Dotted Underline Note

<abbr class="underline
             decoration-dotted
             decoration-gray-400
             underline-offset-2
             cursor-help">
  HTML
</abbr>

HTML(hover for tooltip)

Gradient-like Multi-color

<span class="underline
             decoration-4
             decoration-pink-500
             underline-offset-8">
  <span class="text-transparent
               bg-clip-text
               bg-gradient-to-r
               from-purple-500
               to-pink-500">
    Gradient text
  </span>
</span>

Gradient text

Combining Decoration Classes

Text decoration classes can be combined for more complex styling effects.

Combined Example

underline decoration-wavy decoration-red-500 decoration-2 underline-offset-4

Bold Dashed

underline decoration-dashed decoration-blue-600 decoration-4 underline-offset-8

Double Strike

line-through decoration-double decoration-emerald-500 decoration-2

About Tailwind Text Decoration

Tailwind v4 provides comprehensive text decoration utilities for controlling underlines, overlines, and strikethroughs.

For custom values, use arbitrary notation: decoration-[3px], underline-offset-[6px], or decoration-[#custom]

Combine with hover states for interactive effects: hover:underline, hover:decoration-wavy, hover:decoration-4

See text decoration styles on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes including text decorations, underlines, and typography styles. Extract any style with 2 clicks.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →