Tailwind CSS 文本裝飾

文本裝飾

用于控制文本裝飾的實用功能類。

Underline

使用 ?underline ?功能類對文本添加下劃線樣式。

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

Line Through

使用 ?line-through? 功能類來提示刪除文本。

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

No Underline

使用 ?no-underline? 功能類來移除 ?underline ?或 ?line-through? 樣式。

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

響應(yīng)式

要在特定的斷點處控制元素的文本裝飾，請在任何現(xiàn)有的文本裝飾功能類中添加 ?{screen}:? 前綴。例如，使用 ?md:underline? 來應(yīng)用 ?underline ?功能類在中等大小的屏幕和以上的屏幕上。

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

懸停功能類也可以通過在 ?hover:? 前綴前添加響應(yīng)的 ?{screen}:? 前綴來與響應(yīng)的功能類結(jié)合使用。

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

Focus

要控制焦點元素的文本裝飾，請在任何現(xiàn)有的文本裝飾功能類中添加 ?focus:? 前綴。例如，使用 ?focus:underline? 在焦點上應(yīng)用 ?underline ?功能類。

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

通過在 ?focus:? 前綴之前添加響應(yīng)的 ?{screen}:? 前綴，焦點功能類也可以與響應(yīng)的功能類結(jié)合使用。

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

自定義

變體

默認(rèn)情況下， 針對 text decoration 功能類，只生成 responsive, group-hover, focus-within, hover and focus 變體。

您可以通過修改您的 ?tailwind.config.js? 文件中的 ?variants ?部分中的 ?textDecoration ?屬性來控制為 text decoration 功能生成哪些變體。

例如，這個配置也將生成 active 變體:

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

禁用

如果您不打算在您的項目中使用 text decoration 功能，您可以通過在配置文件的 ?corePlugins ?部分將 ?textDecoration ?屬性設(shè)置為 ?false ?來完全禁用它們：

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