Tailwind CSS の基礎：ユーティリティファースト
この章で学ぶこと
Tailwind CSS の基本的な考え方と、完成形の章で見た Button のクラスが何をしているのかを理解します。色（デザイントークン）の話は次章に譲り、ここでは土台となるユーティリティと状態修飾子を押さえます。
ユーティリティファーストとは
従来の CSS は、コンポーネントごとにクラスを作り、そこにスタイルを書いていました。
/* 従来のアプローチ */
.button {
display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
}
Tailwind CSS では、小さなユーティリティクラスを組み合わせてスタイルを作ります。
<button class="inline-flex items-center px-4 py-2 rounded-md">Click me</button>
メリット
| メリット | 説明 |
|---|---|
| 命名が不要 | クラス名を考えなくてよい |
| 名前衝突がない | グローバルな CSS のクラス名衝突が起きない |
| 変更が局所的 | その要素だけ直せばよい |
| 一貫性が出る | 決まったスケール（後述）から選ぶので揃う |
「クラスが長くなる」という弱点は、コンポーネントにまとめることで解決します。それがまさに本書の Button です。
長いクラス列 "inline-flex items-center justify-center px-4 ..."
↓ コンポーネントに閉じ込める
利用側 <Button>Click me</Button>
Button のベースクラスを分解する
完成形の章の Button のベースクラスを見てみましょう。
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
レイアウト
| クラス | 意味 |
|---|---|
inline-flex | インラインの Flexbox にする |
items-center | 縦方向を中央揃え |
justify-center | 横方向を中央揃え |
gap-2 | 中身（アイコンとテキストなど）の間隔を空ける |
ボタンの中身：[icon] ＋ ボタンテキスト
・gap-2 … アイコンとテキストの間隔
・items-center … 縦方向を中央揃え
・justify-center … 横方向を中央揃え
テキスト
| クラス | 意味 |
|---|---|
whitespace-nowrap | テキストを折り返さない |
text-sm | フォントサイズ小（0.875rem） |
font-medium | やや太字（font-weight: 500） |
装飾
| クラス | 意味 |
|---|---|
rounded-md | 角丸（中） |
transition-colors | 色の変化をなめらかにアニメーション |
フォーカスと無効状態（アクセシビリティ）
| クラス | 意味 |
|---|---|
outline-none | ブラウザ既定のアウトラインを消す |
focus-visible:ring-2 | キーボードフォーカス時にリングを表示 |
focus-visible:ring-ring | リングの色（ring トークン、デザイントークンの章） |
disabled:pointer-events-none | 無効時はクリックを受け付けない |
disabled:opacity-50 | 無効時は半透明にする |
focus-visible は、キーボード操作のときだけフォーカスリングを表示する指定です。マウスクリックでは出ません。「キーボード利用者には分かりやすく、マウス利用者には邪魔をしない」という、アクセシビリティのベストプラクティスです。
状態修飾子（modifier）
hover: や disabled: のような接頭辞を付けると、状態に応じたスタイルを指定できます。
<button class="bg-primary hover:bg-primary/90 disabled:opacity-50">ボタン</button>
| 修飾子 | いつ効くか |
|---|---|
hover: | マウスを乗せたとき |
focus: | フォーカス時（マウス・キーボード両方） |
focus-visible: | キーボードフォーカス時のみ |
active: | 押している間 |
disabled: | disabled 属性があるとき |
dark: | ダークモード時 |
サイズで使われているクラス
size: {
default: "h-9 px-4 py-2",
sm: "h-8 px-3",
lg: "h-10 px-6",
icon: "size-9",
}
| クラス | 意味 |
|---|---|
h-9 / h-8 / h-10 | 高さ 36px / 32px / 40px |
px-4 / px-3 / px-6 | 左右パディング 16px / 12px / 24px |
py-2 | 上下パディング 8px |
size-9 | 幅と高さを同時に 36px（正方形。アイコンボタン用） |
スペーシングのスケール
Tailwind の余白やサイズは、一定の比率のスケールから選びます。
0 → 0px
1 → 4px
2 → 8px
3 → 12px
4 → 16px
6 → 24px
8 → 32px
9 → 36px
10 → 40px
数字 1 つあたり 4px が基本です。この決まったスケールから選ぶので、画面全体で余白やサイズが自然と揃い、デザインに統一感が出ます。これもデザインシステムの一部です。
透明度の指定
hover:bg-primary/90 の /90 は「不透明度 90%」を意味します。
<div class="bg-primary/50">50%</div>
<div class="bg-primary/90">90%</div>
ベースの色をそのまま少し薄くしてホバー色にできるので、別の色を用意せずに済みます。
色は「デザイントークン」で指定する
Button の bg-primary や text-primary-foreground は、Tailwind に最初から入っている色ではありません。これらはデザイントークンと呼ばれる、プロジェクトで定義した「意味を持つ色」です。
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
}
Tailwind v4 では、これらを CSS の @theme と CSS 変数で定義します。bg-blue-500 のように色を直接指定するのではなく、bg-primary（主役の色）という意味で指定することで、テーマの切り替えや一貫性が実現できます。
その仕組みは、次章でじっくり学びます。
この章のまとめ
- ユーティリティファースト：小さなクラスを組み合わせてスタイルを作る
- Button のベースクラスはレイアウト・テキスト・装飾・フォーカス・無効状態に分けて読める
- 状態修飾子（
hover:/focus-visible:/disabled:/dark:）で状態別のスタイルを指定する - スペーシングスケールが一貫性を生む
- 色は
bg-blue-500ではなくbg-primaryというデザイントークンで指定する（次章）
次章では、その色（デザイントークン）とデザインシステムの考え方を学びます。