Quick reference

underlinetext-decoration-line: underline;
overlinetext-decoration-line: overline;
line-throughtext-decoration-line: line-through;
no-underlinetext-decoration-line: none;

Basic usage

Setting the text decoration

Control how text is decorated with the underline, no-underline, and line-through utilities.


The quick brown fox jumps over the lazy dog.


The quick brown fox jumps over the lazy dog.


The quick brown fox jumps over the lazy dog.


The quick brown fox jumps over the lazy dog.

<p class="underline ...">The quick brown fox ...</p>
<p class="overline ...">The quick brown fox ...</p>
<p class="line-through ...">The quick brown fox ...</p>
<p class="no-underline ...">The quick brown fox ...</p>

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:text-center to only apply the text-center utility on hover.

Try hovering over the text to see the expected behaviour

<a href="#" class="no-underline hover:underline ...">Link</a>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:underline to apply the underline utility at only medium screen sizes and above.

<p class="no-underline md:underline">
  <!-- ... -->

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.