File: text-decoration-line.md | Updated: 11/15/2025
⌘KCtrl KDocs Blog Showcase Sponsor Plus
Typography
Utilities for controlling the decoration of text.
| Class | Styles |
| --- | --- |
| underline | text-decoration-line: underline; |
| overline | text-decoration-line: overline; |
| line-through | text-decoration-line: line-through; |
| no-underline | text-decoration-line: none; |
Use the underline utility to add an underline to the text of an element:
The quick brown fox jumps over the lazy dog.
<p class="underline">The quick brown fox...</p>
Use the overline utility to add an overline to the text of an element:
The quick brown fox jumps over the lazy dog.
<p class="overline">The quick brown fox...</p>
Use the line-through utility to add a line through the text of an element:
The quick brown fox jumps over the lazy dog.
<p class="line-through">The quick brown fox...</p>
Use the no-underline utility to remove a line from the text of an element:
The quick brown fox jumps over the lazy dog.
<p class="no-underline">The quick brown fox...</p>
Prefix a text-decoration-line utility with a variant like hover:* to only apply the utility in that state:
Hover over the text to see the expected behavior
The quick brown fox jumps over the lazy dog.
<p>The <a href="..." class="no-underline hover:underline ...">quick brown fox</a> jumps over the lazy dog.</p>
Learn more about using variants in the variants documentation .
Prefix a text-decoration-line utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<a class="no-underline md:underline ..." href="..."> <!-- ... --></a>
Learn more about using variants in the variants documentation .
Copyright © 2025 Tailwind Labs Inc.·Trademark Policy