【Tailwind和訳】TYPOGRAPHY/Text Decoration

この記事について

この記事は、TYPOGRAPHY/Text Decorationの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Text Decoration

テキストの装飾をコントロールするためのユーティリティ。

Class	Properties
underline	text-decoration: underline;
line-through	text-decoration: line-through;
no-underline	text-decoration: none;

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ユーティリティを使って、アンダーラインやラインスルーのスタイリングを削除します。

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

レスポンシブ

特定のブレークポイントにおける要素の text decoration を制御するには、既存の text decoration ユーティリティーに{screen}:というプレフィックスを追加します。例えば、md:underlineを使うと、中程度の画面サイズ以上でのみunderlineユーティリティを適用することができます。

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

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

Hover

ホバー時の要素の text decoration を制御するには、既存の text decoration ユーティリティーにhover:というプレフィックスを追加します。例えば、hover:underlineを使用すると、ホバー時にunderlineユーティリティが適用されます。

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

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

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

Focus

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

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

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

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

カスタマイズ

バリアント

デフォルトでは、レスポンシブ、group-hover、focus-within、hover、focusの各バリアントのみが text decoration ユーティリティ用に生成されます。

tailwind.config.jsファイルのvariantsセクションにあるtextDecorationプロパティを変更することで、text decoration ユーティリティ用に生成されるバリアントをコントロールすることができます。

例えば、このコンフィグはアクティブなバリアントも生成します。

tailwind.config.js

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

無効化

もし、プロジェクトで text decoration ユーティリティを使用しない場合は、設定ファイルのcorePluginsセクションでtextDecorationプロパティをfalseに設定することで、完全に無効にすることができます。

tailwind.config.js

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