Typography
要素の行の高さ、または行間隔を制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
text-<size>/<number> | font-size: <size>; line-height: calc(var(--spacing) * <number>); |
text-<size>/(<custom-property>) | font-size: <size>; line-height: var(<custom-property>); |
text-<size>/[<value>] | font-size: <size>; line-height: <value>; |
leading-none | line-height: 1; |
leading-<number> | line-height: calc(var(--spacing) * <number>) |
leading-(<custom-property>) | line-height: var(<custom-property>); |
leading-[<value>] | line-height: <value>; |
text-sm/6 や text-lg/7 のようなフォントサイズユーティリティを使用して、要素のフォントサイズと行間隔を同時に設定します。
それで、私は水の中を歩き始めました。 嘘は言いません、とても怖かったです。 でも私は進み続け、波打ち際を過ぎると奇妙な静けさが私を包みました。 神の介入か、すべての生物の絆かはわかりませんが、ジェリー、その瞬間、私は海洋生物学者でした。
それで、私は水の中を歩き始めました。 嘘は言いません、とても怖かったです。 でも私は進み続け、波打ち際を過ぎると奇妙な静けさが私を包みました。 神の介入か、すべての生物の絆かはわかりませんが、ジェリー、その瞬間、私は海洋生物学者でした。
それで、私は水の中を歩き始めました。 嘘は言いません、とても怖かったです。 でも私は進み続け、波打ち際を過ぎると奇妙な静けさが私を包みました。 神の介入か、すべての生物の絆かはわかりませんが、ジェリー、その瞬間、私は海洋生物学者でした。
<p class="text-base/6 ...">So I started to walk into the water...</p><p class="text-base/7 ...">So I started to walk into the water...</p><p class="text-base/8 ...">So I started to walk into the water...</p>各フォントサイズユーティリティは、行間隔が指定されていない場合、デフォルトの行間隔も設定します。 これらの値とカスタマイズ方法の詳細については、font-size ドキュメントを参照してください。
leading-6 や leading-7 のような leading-<number> ユーティリティを使用して、フォントサイズとは独立して要素の行間隔を設定します。
それで、私は水の中を歩き始めました。 嘘は言いません、とても怖かったです。 でも私は進み続け、波打ち際を過ぎると奇妙な静けさが私を包みました。 神の介入か、すべての生物の絆かはわかりませんが、ジェリー、その瞬間、私は海洋生物学者でした。
それで、私は水の中を歩き始めました。 嘘は言いません、とても怖かったです。 でも私は進み続け、波打ち際を過ぎると奇妙な静けさが私を包みました。 神の介入か、すべての生物の絆かはわかりませんが、ジェリー、その瞬間、私は海洋生物学者でした。
それで、私は水の中を歩き始めました。 嘘は言いません、とても怖かったです。 でも私は進み続け、波打ち際を過ぎると奇妙な静けさが私を包みました。 神の介入か、すべての生物の絆かはわかりませんが、ジェリー、その瞬間、私は海洋生物学者でした。
<p class="text-sm leading-6">So I started to walk into the water...</p><p class="text-sm leading-7">So I started to walk into the water...</p><p class="text-sm leading-8">So I started to walk into the water...</p>leading-none ユーティリティを使用して、要素の行間隔をフォントサイズと等しく設定します。
The quick brown fox jumps over the lazy dog.
<p class="text-2xl leading-none ...">The quick brown fox...</p>以下を使用してください leading-[<value>] 構文 設定するには行間隔完全にカスタムの値に基づいて
<p class="leading-[1.5] ..."> Lorem ipsum dolor sit amet...</p>CSS変数には、以下も使用できます leading-(<custom-property>) 構文
<p class="leading-(--my-line-height) ..."> Lorem ipsum dolor sit amet...</p>これは単なるショートハンドです leading-[var(<custom-property>)] var() 関数を自動的に追加します。
プレフィックスa line-height ユーティリティ md: のようなブレークポイントバリアントを付けて、ユーティリティを適用するのはmedium 画面サイズ以上の場合のみです。
<p class="leading-5 md:leading-6 ..."> Lorem ipsum dolor sit amet...</p>バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。
The leading-<number> ユーティリティは、独自のテーマでカスタマイズできる --spacing テーマ変数によって駆動されます。
@theme { --spacing: 1px; }スペーシングスケールのカスタマイズの詳細については、テーマ変数のドキュメントを参照してください。