Tailwind CSS タイポグラフィ
Tailwind CSS のTypography（タイポグラフィ）機能は、開発者がテキストスタイルを効率的にデザインするためのユーティリティツールのセットです。フォント、フォントウェイト、行の高さ、文字間隔、テキスト揃えなどの基本的なタイポグラフィプロパティの設定を含み、さらにレスポンシブフォントサイズ、テキストシャドウ、テキスト装飾などの複雑なタイポグラフィ要件もサポートしています。
1. フォントファミリー（Font Family）
Tailwind は、フォントファミリーを設定するためのユーティリティクラスをいくつか提供しています。クラス名を使って簡単に適用できます。
よく使うユーティリティクラス：
font-sans: サンセリフフォントを設定します。font-serif: セリフフォントを設定します。font-mono: 等幅フォントを設定します。
例
<p class="font-serif ...">テストテキスト内容...</p>
<p class="font-mono ...">テストテキスト内容...</p>
試してみる »
2. フォントサイズ（Font Size）
フォントサイズは Tailwind のtext-*ユーティリティクラスで制御でき、以下からtext-xs 到 text-9xlの複数のサイズに対応しており、フォントサイズをカスタマイズすることもできます。
よく使うユーティリティクラス：
text-xs,text-sm,text-base,text-lg,text-xl,text-2xl, ...,text-9xl
例
<p class="text-base ...">テストテキスト内容...</p>
<p class="text-lg ...">テストテキスト内容...</p>
<p class="text-xl ...">テストテキスト内容...</p>
<p class="text-2xl ...">テストテキスト内容...</p>
試してみる »
3. フォントウェイト（Font Weight）
フォントの太さはfont-*ユーティリティクラスで制御でき、Tailwind は以下からfont-thin 到 font-blackの複数の太さオプションがあります。
よく使うユーティリティクラス：
font-thin: 極細フォントfont-light: ライトフォントfont-normal: ノーマルフォントfont-medium: 中程度の太さのフォントfont-semibold: セミボールドフォントfont-bold: ボールドfont-extrabold: より太いフォントfont-black: 極太フォント
例
<p class="font-normal ...">テストテキスト内容...</p>
<p class="font-medium ...">テストテキスト内容...</p>
<p class="font-semibold ...">テストテキスト内容...</p>
<p class="font-bold ...">テストテキスト内容...</p>
試してみる »
4. 行の高さ（Line Height）
行の高さ（行間）はleading-*ユーティリティクラスで制御できます。Tailwind は複数の行高オプションを提供しており、以下からleading-none 到 leading-loose、必要に応じて調整できます。
よく使うユーティリティクラス：
leading-none: 行の高さ 1leading-tight: コンパクトな行高leading-snug: ややコンパクトな行高leading-normal: デフォルトの行高leading-relaxed: リラックスした行高leading-loose: ルーズな行高
例
<p class="leading-relaxed ...">So I started to walk into the water...</p>
<p class="leading-loose ...">So I started to walk into the water...</p>
試してみる »
5. 文字間隔（Letter Spacing）
文字間隔はtracking-*ユーティリティクラスで制御できます。一般的な文字間隔オプションには、以下のものがあります。tracking-tight、tracking-normalとtracking-wideこれらは、文字と文字の間のスペースを調整するために使用します。
よく使うユーティリティクラス：
tracking-tight: コンパクトな文字間隔tracking-normal: デフォルトの文字間隔tracking-wide: 広い文字間隔tracking-wider: より広い文字間隔tracking-wide: 極めて広い文字間隔
例
<p class="tracking-normal ...">テストテキスト内容...</p>
<p class="tracking-wide ...">テストテキスト内容...</p>
試してみる »
6. テキストの色（Text Color）
Tailwind は複数のテキストカラークラスを提供しており、テキストに異なる色を設定できます。次のように使用できますtext-*ユーティリティクラスで色を設定します。
よく使うユーティリティクラス：
text-gray-500: ミディアムグレーtext-red-500: 赤text-blue-500: 青text-green-500: 緑
例
<p class="text-sky-400/75">テストテキスト内容...</p>
<p class="text-sky-400/50">テストテキスト内容...</p>
<p class="text-sky-400/25">テストテキスト内容...</p>
<p class="text-sky-400/0">テストテキスト内容...</p>
試してみる »
7. テキスト揃え（Text Alignment）
Tailwind は、テキストの揃え方を制御するシンプルなユーティリティクラスを提供しています。次のように使用できますtext-left、text-center 或 text-rightテキストの揃え方を設定します。
よく使うユーティリティクラス：
text-left: 左揃えtext-center: 中央揃えtext-right: 右揃え
例
<p class="text-center">これは中央揃えのテキストです</p>
<p class="text-right">これは右揃えのテキストです</p>
試してみる »
8. テキスト装飾（Text Decoration）
次を使用できますunderline, line-throughとno-underlineテキストの下線と取り消し線を制御します。
よく使うユーティリティクラス：
underline: 下線を追加line-through: 取り消し線を追加no-underline: 下線を削除
例
<p class="overline ...">テストテキスト内容...</p>
<p class="line-through ...">テストテキスト内容...</p>
<p class="no-underline ...">テストテキスト内容...</p>
試してみる »
9. テキスト変換（Text Transform）
Tailwind はuppercase、lowercaseとcapitalizeクラスで、テキストの大文字/小文字変換を制御できます。
よく使うユーティリティクラス：
uppercase: すべて大文字lowercase: すべて小文字capitalize: 各単語の先頭文字を大文字にする
例
<p class="uppercase ...">テストテキスト内容...</p>
<p class="lowercase ...">テストテキスト内容...</p>
<p class="capitalize ...">テストテキスト内容...</p>
試してみる »
10. テキストシャドウ（Text Shadow）
Tailwind では、テキストに影の効果を追加できます。次を使用しますtext-shadowユーティリティクラス。
よく使うユーティリティクラス：
text-shadow: シンプルなテキストシャドウを設定します（この機能にはカスタムプラグインまたは拡張機能が必要です）。
11. レスポンシブフォントサイズ（Responsive Font Size）
Tailwind はレスポンシブデザインをサポートしており、画面サイズに応じて異なるフォントサイズを設定できます。異なる画面サイズに、たとえば次のようなプレフィックスを追加することでsm:, md:, lg:, xl:などでフォントサイズを制御できます。