Tailwind CSS ホームページ
  1. タイポグラフィ
  2. テキスト装飾

クイックリファレンス

クラス
プロパティ
underlinetext-decoration-line: underline;
overlinetext-decoration-line: overline;
line-throughtext-decoration-line: line-through;
no-underlinetext-decoration-line: none;

基本的な使い方

テキスト装飾の設定

underline、no-underline、line-throughユーティリティを使用して、テキストの装飾方法を制御します。

underline

すばやい茶色のキツネはのろまな犬を飛び越える。

overline

すばやい茶色のキツネはのろまな犬を飛び越える。

line-through

すばやい茶色のキツネはのろまな犬を飛び越える。

no-underline

すばやい茶色のキツネはのろまな犬を飛び越える。

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

条件付き適用

ホバー、フォーカス、その他の状態

Tailwindでは、バリアント修飾子を使用して、さまざまな状態でユーティリティクラスを条件付きで適用できます。たとえば、 hover:underline を使用して、underlineユーティリティをhover.

テキストの上にマウスを移動して、期待される動作を確認してください

下線なしのリンク 
<a href="#" class="no-underline hover:underline ...">Link</a>

利用可能なすべての状態修飾子の完全なリストについては、 ホバー、フォーカス、その他の状態ドキュメントを参照してください。

ブレークポイントとメディアクエリ

また、バリアント修飾子を使用して、レスポンシブブレークポイント、ダークモード、prefers-reduced-motionなどのメディアクエリをターゲットにすることもできます。たとえば、md:underlineを使用して、中程度の画面サイズ以上でのみunderlineユーティリティを適用します。

<p class="no-underline md:underline">
  <!-- ... -->
</p>

詳細については、次のドキュメントを参照してください。 レスポンシブデザイン, ダークモードおよび その他のメディアクエリ修飾子.