メインコンテンツまでスキップ

タイポグラフィ

この章では、Tailwind CSS でテキストをスタイリングする方法を学びます。

フォントサイズ​

クラスサイズ行高さ
text-xs12px16px
text-sm14px20px
text-base16px24px
text-lg18px28px
text-xl20px28px
text-2xl24px32px
text-3xl30px36px
text-4xl36px40px
text-5xl48px1 (48px 相当)
text-6xl60px1 (60px 相当)
大見出しの行高さ

text-5xl 以上のサイズでは、行高さが unitless 値の 1 (フォントサイズと同じ) に設定されています。見出しなど大きな文字での使用が想定されているためです。本文で使用する場合は leading-normal や leading-relaxed で行高さを調整してください。

なお、v4 では行高さが calc() ベースで定義されています (例: text-xs は calc(1 / 0.75))。上記の表は px 計算値で記載しています。

<p class="text-sm">小さいテキスト</p>
<p class="text-base">標準テキスト</p>
<p class="text-lg">大きいテキスト</p>
<h1 class="text-4xl">見出し</h1>

フォントウェイト​

クラスweight
font-thin100
font-light300
font-normal400
font-medium500
font-semibold600
font-bold700
font-extrabold800
font-black900
<p class="font-normal">通常</p>
<p class="font-medium">ミディアム</p>
<p class="font-bold">太字</p>

フォントファミリー​

クラスフォント
font-sansシステムのサンセリフ
font-serifセリフ体
font-mono等幅フォント
<p class="font-sans">サンセリフ</p>
<p class="font-serif">セリフ</p>
<code class="font-mono">等幅フォント</code>

行高さ (line-height)​

クラス値
leading-none1
leading-tight1.25
leading-snug1.375
leading-normal1.5
leading-relaxed1.625
leading-loose2
<p class="leading-tight">狭い行間</p>
<p class="leading-normal">通常の行間</p>
<p class="leading-relaxed">広い行間</p>

字間 (letter-spacing)​

クラス値
tracking-tighter-0.05em
tracking-tight-0.025em
tracking-normal0
tracking-wide0.025em
tracking-wider0.05em
tracking-widest0.1em
<p class="tracking-tight">詰めた字間</p>
<p class="tracking-wide">広い字間</p>

テキスト配置​

クラス配置
text-left左揃え
text-center中央揃え
text-right右揃え
text-justify両端揃え
<p class="text-center">中央揃えのテキスト</p>

テキストカラー​

<p class="text-gray-500">グレー</p>
<p class="text-blue-600">青</p>
<p class="text-red-500">赤</p>
<p class="text-green-600">緑</p>

テキスト装飾​

下線・取り消し線​

<p class="underline">下線</p>
<p class="line-through">取り消し線</p>
<p class="no-underline">装飾なし</p>

装飾のスタイル​

<p class="underline decoration-wavy">波線</p>
<p class="underline decoration-dotted">点線</p>
<p class="underline decoration-dashed">破線</p>
<p class="underline decoration-double">二重線</p>

装飾の色と太さ​

<p class="underline decoration-blue-500 decoration-2">
  青い太めの下線
</p>

テキスト変換​

<p class="uppercase">大文字に変換</p>
<p class="lowercase">小文字に変換</p>
<p class="capitalize">先頭大文字</p>
<p class="normal-case">変換なし</p>

テキストオーバーフロー​

省略記号​

<p class="truncate w-48">
  長いテキストが省略されます...
</p>

折り返し​

<p class="break-normal">通常の折り返し</p>
<p class="break-words">単語の途中でも折り返し</p>
<p class="break-all">任意の位置で折り返し</p>

ホワイトスペース​

<p class="whitespace-nowrap">折り返さない</p>
<p class="whitespace-pre">空白を保持</p>
<p class="whitespace-pre-wrap">空白を保持 + 折り返し</p>

行のクランプ​

複数行での省略を制御します。

<p class="line-clamp-2">
  長いテキストが 2 行で省略されます。
  3 行目以降は表示されません。
  続きのテキスト...
</p>

<p class="line-clamp-3">3 行で省略</p>

垂直配置​

<span class="align-baseline">ベースライン</span>
<span class="align-top">上揃え</span>
<span class="align-middle">中央揃え</span>
<span class="align-bottom">下揃え</span>

テキストインデント​

<p class="indent-4">最初の行が 16px インデント</p>
<p class="indent-8">最初の行が 32px インデント</p>

実践例​

見出しとサブテキスト​

<div class="text-center">
  <h1 class="text-4xl font-bold text-gray-900">
    メインタイトル
  </h1>
  <p class="mt-2 text-lg text-gray-600">
    サブタイトルがここに入ります
  </p>
</div>

記事本文​

<article>
  <h2 class="text-2xl font-bold mb-4">見出し</h2>
  <p class="text-gray-700 leading-relaxed mb-4">
    本文のテキストです。読みやすい行間と適切なコントラストで
    ユーザーの可読性を高めます。
  </p>
  <p class="text-gray-700 leading-relaxed">
    2 段落目のテキストです...
  </p>
</article>

カードのテキスト​

<div class="p-4 bg-white rounded-lg shadow-sm">
  <span class="text-xs font-semibold text-blue-600 uppercase tracking-wide">
    カテゴリ
  </span>
  <h3 class="mt-2 text-xl font-bold text-gray-900">
    カードタイトル
  </h3>
  <p class="mt-2 text-sm text-gray-600 line-clamp-2">
    カードの説明文です。長い場合は 2 行で省略されます。
    続きのテキストがここに...
  </p>
</div>

引用​

<blockquote class="pl-4 border-l-4 border-blue-500 italic text-gray-600">
  <p class="text-lg">"引用文がここに入ります。"</p>
  <cite class="block mt-2 text-sm not-italic">— 著者名</cite>
</blockquote>

ラベルと入力​

<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">
    メールアドレス
  </label>
  <input
    type="email"
    class="w-full px-3 py-2 border border-gray-300 rounded-sm text-base"
    placeholder="example@email.com"
  />
  <p class="mt-1 text-xs text-gray-500">
    ※ 確認メールを送信します
  </p>
</div>

日本語フォントの考慮事項​

日本語を扱うプロジェクトでは、フォント設定に注意が必要です。

@theme {
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
}
<p class="font-sans">日本語テキスト</p>
日本語 Web フォントの最適化

日本語フォントは英語フォントに比べてファイルサイズが大きいため、Google Fonts などから読み込む場合は font-display: swap の指定や、使用するウェイトの絞り込みを検討してください。

まとめ​

  • text-* でフォントサイズ
  • font-* でウェイトとファミリー
  • leading-* で行高さ
  • tracking-* で字間
  • text-center 等で配置
  • truncate / line-clamp-* で省略
  • 可読性を意識した組み合わせ

次に読む​