タイポグラフィ
要素のフォントサイズを制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
text-xs | font-size: var(--text-xs); /* 0.75rem (12px) */ line-height: var(--text-xs--line-height); /* calc(1 / 0.75) */ |
text-sm | font-size: var(--text-sm); /* 0.875rem (14px) */ line-height: var(--text-sm--line-height); /* calc(1.25 / 0.875) */ |
text-base | font-size: var(--text-base); /* 1rem (16px) */ line-height: var(--text-base--line-height); /* calc(1.5 / 1) */ |
text-lg | font-size: var(--text-lg); /* 1.125rem (18px) */ line-height: var(--text-lg--line-height); /* calc(1.75 / 1.125) */ |
text-xl | font-size: var(--text-xl); /* 1.25rem (20px) */ line-height: var(--text-xl--line-height); /* calc(1.75 / 1.25) */ |
text-2xl | font-size: var(--text-2xl); /* 1.5rem (24px) */ line-height: var(--text-2xl--line-height); /* calc(2 / 1.5) */ |
text-3xl | font-size: var(--text-3xl); /* 1.875rem (30px) */ line-height: var(--text-3xl--line-height); /* calc(2.25 / 1.875) */ |
text-4xl | font-size: var(--text-4xl); /* 2.25rem (36px) */ line-height: var(--text-4xl--line-height); /* calc(2.5 / 2.25) */ |
text-5xl | font-size: var(--text-5xl); /* 3rem (48px) */ line-height: var(--text-5xl--line-height); /* 1 */ |
text-6xl | font-size: var(--text-6xl); /* 3.75rem (60px) */ line-height: var(--text-6xl--line-height); /* 1 */ |
text-7xl | font-size: var(--text-7xl); /* 4.5rem (72px) */ line-height: var(--text-7xl--line-height); /* 1 */ |
text-8xl | font-size: var(--text-8xl); /* 6rem (96px) */ line-height: var(--text-8xl--line-height); /* 1 */ |
text-9xl | font-size: var(--text-9xl); /* 8rem (128px) */ line-height: var(--text-9xl--line-height); /* 1 */ |
text-(length:<custom-property>) | font-size: var(<custom-property>); |
text-[<value>] | font-size: <value>; |
要素のフォントサイズを設定するには、text-sm や text-lg などのユーティリティを使用します
すばしっこい茶色の狐はのろまの犬を飛び越える。
すばしっこい茶色の狐はのろまの犬を飛び越える。
すばしっこい茶色の狐はのろまの犬を飛び越える。
すばしっこい茶色の狐はのろまの犬を飛び越える。
すばしっこい茶色の狐はのろまの犬を飛び越える。
<p class="text-sm ...">The quick brown fox ...</p><p class="text-base ...">The quick brown fox ...</p><p class="text-lg ...">The quick brown fox ...</p><p class="text-xl ...">The quick brown fox ...</p><p class="text-2xl ...">The quick brown fox ...</p>要素のフォントサイズと行の高さを同時に設定するには、text-sm/6 や text-lg/7 などのユーティリティを使用します
それで私は水の中を歩き始めました。正直に言うと、とても怖かったです。しかし、私は進み続け、波打ち際を過ぎると、奇妙な静けさが私を包み込みました。それが神の介入だったのか、すべての生き物の絆だったのかはわかりませんが、ジェリー、その瞬間、私はまさに海洋生物学者でした。
それで私は水の中を歩き始めました。正直に言うと、とても怖かったです。しかし、私は進み続け、波打ち際を過ぎると、奇妙な静けさが私を包み込みました。それが神の介入だったのか、すべての生き物の絆だったのかはわかりませんが、ジェリー、その瞬間、私はまさに海洋生物学者でした。
それで私は水の中を歩き始めました。正直に言うと、とても怖かったです。しかし、私は進み続け、波打ち際を過ぎると、奇妙な静けさが私を包み込みました。それが神の介入だったのか、すべての生き物の絆だったのかはわかりませんが、ジェリー、その瞬間、私はまさに海洋生物学者でした。
<p class="text-sm/6 ...">So I started to walk into the water...</p><p class="text-sm/7 ...">So I started to walk into the water...</p><p class="text-sm/8 ...">So I started to walk into the water...</p>以下を使用してください text-[<value>] 構文 設定するにはフォントサイズ完全にカスタムの値に基づいて
<p class="text-[14px] ..."> Lorem ipsum dolor sit amet...</p>CSS 変数の場合は、以下も使用できます text-(length:<custom-property>) 構文
<p class="text-(length:--my-text-size) ..."> Lorem ipsum dolor sit amet...</p>これは単なるショートハンドです text-[lengthvar(<custom-property>)] 自動的に var() 関数を追加します。
プレフィックスa font-size ユーティリティ md: のようなブレークポイントバリアントを使用すると、ユーティリティを適用するのはmedium 画面サイズ以上
<p class="text-sm md:text-base ..."> Lorem ipsum dolor sit amet...</p>バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。
--text-* テーマ変数を使用して、フォントサイズ プロジェクト内のユーティリティをカスタマイズします
@theme { --text-tiny: 0.625rem; }これで、 text-tiny ユーティリティをマークアップで使用できます
<div class="text-tiny"> <!-- ... --></div>フォントサイズにデフォルトの line-height、letter-spacing、および font-weight の値を指定することもできます
@theme { --text-tiny: 0.625rem; --text-tiny--line-height: 1.5rem; --text-tiny--letter-spacing: 0.125rem; --text-tiny--font-weight: 500; }テーマのカスタマイズの詳細については、 テーマのドキュメントを参照してください.