letter-spacing

要素のトラッキング（文字間隔）を制御するためのユーティリティ。

クラススタイル

クラス	スタイル
`tracking-tighter`	`letter-spacing: var(--tracking-tighter); /* -0.05em */`
`tracking-tight`	`letter-spacing: var(--tracking-tight); /* -0.025em */`
`tracking-normal`	`letter-spacing: var(--tracking-normal); /* 0em */`
`tracking-wide`	`letter-spacing: var(--tracking-wide); /* 0.025em */`
`tracking-wider`	`letter-spacing: var(--tracking-wider); /* 0.05em */`
`tracking-widest`	`letter-spacing: var(--tracking-widest); /* 0.1em */`
`tracking-(<custom-property>)`	`letter-spacing: var(<custom-property>);`
`tracking-[<value>]`	`letter-spacing: <value>;`

tracking-tighter

letter-spacing: var(--tracking-tighter); /* -0.05em */

tracking-tight

letter-spacing: var(--tracking-tight); /* -0.025em */

tracking-normal

letter-spacing: var(--tracking-normal); /* 0em */

tracking-wide

letter-spacing: var(--tracking-wide); /* 0.025em */

tracking-wider

letter-spacing: var(--tracking-wider); /* 0.05em */

tracking-widest

letter-spacing: var(--tracking-widest); /* 0.1em */

tracking-(<custom-property>)

letter-spacing: var(<custom-property>);

tracking-[<value>]

letter-spacing: <value>;

例

基本的な例

tracking-tight や tracking-wide のようなユーティリティを使用して、要素の文字間隔を設定します

tracking-tight

The quick brown fox jumps over the lazy dog.

tracking-normal

The quick brown fox jumps over the lazy dog.

tracking-wide

The quick brown fox jumps over the lazy dog.

<p class="tracking-tight ...">The quick brown fox ...</p>
<p class="tracking-normal ...">The quick brown fox ...</p>
<p class="tracking-wide ...">The quick brown fox ...</p>

負の値の使用

負の値を使用することは、Tailwindが標準で提供する名前付き文字間隔スケールではあまり意味がありませんが、スケールをカスタマイズして数値を使用している場合は役立つことがあります。

@theme {
  --tracking-1: 0em;
  --tracking-2: 0.025em;
  --tracking-3: 0.05em;
  --tracking-4: 0.1em;
}

負の文字間隔の値を使用するには、クラス名にダッシュをプレフィックスとして付けて、負の値に変換します。

<p class="-tracking-2">The quick brown fox ...</p>

カスタム値の使用

以下を使用してください tracking-[<value>] 構文を設定するには文字間隔完全にカスタムの値に基づいて

<p class="tracking-[.25em] ...">
  Lorem ipsum dolor sit amet...
</p>

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

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

これは単なるショートハンドです tracking-[var(<custom-property>)] var() 関数を自動的に追加するものです。

レスポンシブデザイン

プレフィックスa letter-spacing ユーティリティ md: のようなブレークポイントバリアントを付けて、ユーティリティを適用する対象をmedium スクリーンサイズ以上のみにします

<p class="tracking-tight md:tracking-wide ...">
  Lorem ipsum dolor sit amet...
</p>

バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。

テーマのカスタマイズ

--tracking-* テーマ変数を使用して、文字間隔プロジェクト内のユーティリティをカスタマイズします

@theme {
  --tracking-tightest: -0.075em; 
}

これで tracking-tightest ユーティリティをマークアップで使用できます

<p class="tracking-tightest">
  Lorem ipsum dolor sit amet...
</p>

テーマのカスタマイズの詳細については、テーマのドキュメント.

letter-spacing

このページ内