Text Decoration

Underline

Use the underline utility to underline text.

Line Through

Use the line-through utility to strike out text.

No Underline

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

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.

<p class="no-underline md:underline ...">
  The quick brown fox jumps over the lazy dog.
</p>

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

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.

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.

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

Variants

默認情況下, 只有 響應式、group-hover、focus-within、hover 和 focus 的 text decoration 變化模式 (variants) 會產生。

在 tailwind.config.js 的 variants 區塊中變更 textDecoration 屬性來決定有哪些變化模式會生成。

舉個例子來說，這個設定將會生成 響應式 和 active 的變化模式。

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

Disabling

如果你不打算在專案中使用 text decoration 功能，可以在你的設定檔裡的 corePlugins 屬性中將 textDecoration 設定為 false 來停用功能：

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