Text decoration utilities let you add underlines, overlines, line-throughs, and remove default decorations from links. These small details make a big difference in readability and design.
Decoration types
<p class="underline">Underlined text</p>
<p class="overline">Overline text — line above</p>
<p class="line-through">Strikethrough text</p>
<p class="no-underline">No decoration (useful on links)</p>
Decoration color
Control the color of your text decoration independently from the text color.
<p class="underline decoration-blue-500 underline-offset-4">
Blue underline with offset
</p>
<p class="line-through decoration-red-500">
Red strikethrough for deleted items
</p>
Decoration style
Change the line style from solid to dashed, dotted, double, or wavy.
<p class="underline decoration-solid">Solid underline</p>
<p class="underline decoration-dashed">Dashed underline</p>
<p class="underline decoration-dotted">Dotted underline</p>
<p class="underline decoration-double">Double underline</p>
<p class="underline decoration-wavy">Wavy underline</p>
Link styling pattern
A common pattern for links is to remove the default underline and add it back on hover.
<a href="#" class="text-blue-600 no-underline hover:underline">
Hover to see underline
</a>