第4部 Utility Class を使う
ここからは、いよいよ個々のユーティリティクラスを学びます。ただし本書はリファレンス(クラス一覧表)ではありません。クラスの全網羅は公式ドキュメントに任せ、本書は次の 3 つを各章で一貫して扱います。
- 素の CSS ではどう考えるか(前提となる CSS の考え方)
- Tailwind ではどう対応するか(クラスの形と、生成される CSS)
- 実務でどう使い分けるか(一貫性を保つ判断、任意の値の乱用を避ける勘所)
そして、第2部で学んだ仕組み——--spacing を基準にした動的計算、oklch の色、任意の値、container query——に何度も立ち返ります。クラスを暗記するのではなく、「この値はテーマのどこから来ているのか」を理解することが、第4部のゴールです。
各章共通の注意(任意の値について): Tailwind は
p-[13px]のように角かっこで任意の値を書けます(第4章)。これは「スケールにない値がどうしても必要なとき」の便利な逃げ道ですが、多用するとスケールという制約(第3章)が崩れ、デザインの一貫性が失われます。各章で「ここぞ」という使いどころと、避けるべき乱用を示します。