テキストの装飾

テキストの装飾を制御するためのユーティリティ。

Class reference

Class
Properties
.underlinetext-decoration: underline;
.line-throughtext-decoration: line-through;
.no-underlinetext-decoration: none;

Underline

.underlineユーティリティを使用して、テキストに下線を付けます。

The quick brown fox jumped over the lazy dog.

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

Line Through

.line-throughユーティリティを使用して、テキストを削除します。

The quick brown fox jumped over the lazy dog.

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

No Underline

.no-underlineユーティリティを使用して、下線またはラインスルースタイルを削除します。

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

Responsive

特定のブレークポイントで要素のテキスト装飾を制御するには、既存のテキスト装飾ユーティリティに{screen}:プレフィックスを追加します。 たとえば、md:underlineを使用して、中程度の画面サイズ以上でのみunderlineユーティリティを適用します。

For more information about Tailwind's responsive design Tailwindのレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。

<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

ホバー時の要素のテキスト装飾を制御するには、既存のテキスト装飾ユーティリティにhover:プレフィックスを追加します。 たとえば、hover:underlineを使用して、ホバーにunderlineユーティリティを適用します。

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

ホバーユーティリティは、レスポンシブ{screen}:プレフィックスをhover:プレフィックスのに追加することで、レスポンシブユーティリティと組み合わせることもできます。

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

Focus

フォーカスされている要素のテキスト装飾を制御するには、既存のテキスト装飾ユーティリティにfocus:プレフィックスを追加します。たとえば、focus:underlineを使用して、underlineユーティリティをフォーカスに適用します。

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

フォーカスユーティリティは、レスポンシブ{screen}:プレフィックスをfocus:プレフィックスのに追加することで、レスポンシブユーティリティと組み合わせることもできます。

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

Customizing

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive, hover and focus バリアントはtext decoration utilitiesのために作られます。

あなたはどのバリアントがtext decoration utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのtextDecorationプロパティを修正することによってコントロールできます。

例として、この設定は also active and group-hover バリアントを作ります。

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

無効にする

もしtext decoration utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのtextDecoration propertyfalseに設定することで完全に無効にすることができます。

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

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!