「及時」模式:全新世代的 Tailwind CSS
Tailwind CSS on GitHub

Text Decoration

Utilities for controlling the decoration of text.

Default class reference

Class
屬性
underlinetext-decoration: underline;
line-throughtext-decoration: line-through;
no-underlinetext-decoration: none;

Underline

Use the underline utility to underline text.

The quick brown fox jumps over the lazy dog.

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

Line Through

Use the line-through utility to strike out text.

The quick brown fox jumps over the lazy dog.

<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.

<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.

<a href="#" class="no-underline hover:underline ...">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

Variants

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

tailwind.config.jsvariants 區塊中變更 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,
    }
  }