Tailwind CSSとは何か — ユーティリティファーストの考え方 - Tailwind CSS実践ガイド

Tailwind CSSは「ユーティリティファースト」という考え方に基づいたCSSフレームワークです。従来のCSSやBootstrapとは全く異なるアプローチで、近年のフロントエンド開発で急速に普及しています。

学習者

CSSはある程度書けるんだけど、HTMLにクラスをずらずら並べるTailwind、正直ごちゃごちゃして見えて不安…。本当に実務で使われてるの？

最初はその違和感が普通です。でも世界中の現場で採用が進んでいるのには理由があります。この章で「なぜTailwindなのか」を腹落ちさせましょう。

従来のCSSアプローチとの違い

<button class="btn btn-primary">送信</button>

.btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
}
.btn-primary {
  background-color: #2563eb;
  color: white;
}

クラスに意味のある名前を付けて、CSSファイルにスタイルを書く方法です。

<button class="px-4 py-2 rounded-md font-semibold bg-blue-600 text-white hover:bg-blue-700 transition-colors">
  送信
</button>

CSSを書かず、あらかじめ用意された小さなクラスをHTMLに直接並べます。

「このカードのラッパーを何クラスにしよう？ .card-wrapper？ .card-container？」という命名に悩む時間がゼロになります。

クラスを新しく作るたびにCSSが増える代わりに、決まったユーティリティを組み合わせるだけなのでファイルサイズが安定します。PurgeCSS（未使用クラスの削除）で本番ビルドはさらに小さくなります。

text-blue-600 や p-4 は決まった値を参照します。#2463EB や 16px を手打ちするより、プロジェクト全体で値が統一されます。

HTMLとCSSを行き来せず、HTML上でスタイルも決められます。特にコンポーネント単位で開発するReactと非常に相性が良いです。

確かにクラス名は多くなります。ただし、Reactのようなコンポーネント指向では1つのコンポーネントのHTML量が少ないため、実務ではそれほど問題になりません。

慣れると flex items-center gap-4 で「Flexboxで縦中央・gap 16px」とすぐ読めます。慣れるまでに少し時間はかかります。

ダイナミックなスタイル変更（JavaScriptで変数を使って色を変えるなど）はTailwindだけでは難しい場面があります。その場合はCSS変数やinlineスタイルと組み合わせます。