テキストとフォントのユーティリティ
テキストの大きさ・太さ・行間・色——読みやすさを左右する要素は、Tailwindでは text-* font-* leading-* といったユーティリティで指定します。
学習者文字まわりのクラスが多すぎて、どれを使えば「それっぽく」なるのか分からない…。
先生まずは2つの型だけ。見出しは text-2xl font-bold leading-tight、本文は text-base leading-relaxed。これだけで一気に整って見えるよ。
font-size
<p class="text-sm">14px（0.875rem）</p>
<p class="text-base">16px（1rem）デフォルト</p>
<p class="text-lg">18px（1.125rem）</p>
<p class="text-xl">20px（1.25rem）</p>
<p class="text-2xl">24px（1.5rem）</p>
<p class="text-3xl">30px（1.875rem）</p>
<p class="text-4xl">36px（2.25rem）</p>font-weight
<p class="font-normal">通常（400）</p>
<p class="font-medium">やや太め（500）</p>
<p class="font-semibold">セミボールド（600）</p>
<p class="font-bold">ボールド（700）</p>line-height
<p class="leading-tight">行間狭い（1.25）— 見出し向け</p>
<p class="leading-normal">通常（1.5）</p>
<p class="leading-relaxed">ゆとりあり（1.625）— 本文向け</p>
<p class="leading-loose">広め（2）</p>text-align / text-color
<p class="text-center">中央揃え</p>
<p class="text-right">右揃え</p>
<p class="text-gray-600">グレーテキスト</p>
<p class="text-blue-600">ブルーテキスト</p>
<p class="text-red-500">エラーカラー</p>テキスト省略
<!-- 1行で省略 -->
<p class="truncate">長いテキストが...で省略されます</p>
<!-- 複数行で省略 -->
<p class="line-clamp-2">2行で省略されるテキスト...</p>
<p class="line-clamp-3">3行で省略されるテキスト...</p>@tailwindcss/typography プラグイン
マークダウン・ブログ記事など長文コンテンツには prose クラスが便利です。
npm install @tailwindcss/typography<article class="prose prose-lg max-w-none">
<!-- 見出し・段落・リスト・コードが美しくスタイリングされる -->
</article>ちゃんと使うためのポイント
- 見出しには
text-2xl font-bold leading-tight、本文にはtext-base leading-relaxedが基本形 line-clamp-*でカードのテキスト溢れを防ぐ- 長文コンテンツには
@tailwindcss/typographyのproseが強力
次の章では、**カラーシステム**を学びます。