text-decoration-thickness

例

基本的な例

decoration-<number> ユーティリティ（decoration-2 や decoration-4 など）を使用して、要素のテキスト装飾の太さを変更します。

<p class="underline decoration-1">The quick brown fox...</p>
<p class="underline decoration-2">The quick brown fox...</p>
<p class="underline decoration-4">The quick brown fox...</p>

カスタム値の使用

以下を使用してください decoration-[<value>] 構文 設定するにはテキスト装飾の太さ完全にカスタムの値に基づいて

<p class="decoration-[0.25rem] ...">
  Lorem ipsum dolor sit amet...
</p>

CSS変数には、以下も使用できます。 decoration-(<custom-property>) 構文

<p class="decoration-(--my-decoration-thickness) ...">
  Lorem ipsum dolor sit amet...
</p>

これは単なる省略形です decoration-[var(<custom-property>)] var() 関数を自動的に追加します。

レスポンシブデザイン

プレフィックスa text-decoration-thickness ユーティリティ md: のようなブレークポイントバリアントをプレフィックスとして付けると、medium スクリーンサイズ以上でのみユーティリティが適用されます。medium スクリーンサイズ以上

<p class="underline md:decoration-4 ...">
  Lorem ipsum dolor sit amet...
</p>

バリアントの使用方法の詳細については、バリアントに関するドキュメントをご覧ください。