Text Decoration

Utilities for controlling the decoration of text.

Class reference

Underline

Use the .underline utility to underline text.

<p class="underline ...">The quick brown fox ...</p>

Line Through

Use the .line-through utility to strike out text.

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

No Underline

Use the .no-underline utility to remove underline or line-through styling.

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

Responsive

To control the text decoration of an element at a specific breakpoint, add a {screen}: prefix to any existing text decoration utility. For example, use md:underline to apply the underline utility at only medium screen sizes and above.

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

all

sm

md

lg

xl

<p class="underline sm:no-underline md:line-through lg:underline xl:no-underline ...">
  The quick brown fox jumped over the lazy dog.
</p>

The quick brown fox jumped over the lazy dog.

Hover

To control the text decoration of an element on hover, add the hover: prefix to any existing text decoration utility. For example, use hover:underline to apply the underline utility on hover.

<a href="#hover" class="no-underline hover:underline text-blue-500 text-lg">Link</a>

Hover utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the hover: prefix.

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

Focus

To control the text decoration of an element on focus, add the focus: prefix to any existing text decoration utility. For example, use focus:underline to apply the underline utility on focus.

<input class="focus:underline ..." value="Focus me">

Focus utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the focus: prefix.

<input class="md:focus:underline ..." value="Focus me">

Customizing

Responsive and pseudo-class variants

By default, only responsive, hover and focus variants are generated for text decoration utilities.

You can control which variants are generated for the text decoration utilities by modifying the textDecoration property in the variants section of your tailwind.config.js file.

For example, this config will also generate active and group-hover variants:

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     textDecoration: ['responsive', 'hover', 'focus'],
+     textDecoration: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
    }
  }

Disabling

If you don’t plan to use the text decoration utilities in your project, you can disable them entirely by setting the textDecoration property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     textDecoration: false,
    }
  }

← Text Opacity   Text Transform →