Utility-First の CSS フレームワーク。クラス名で直接スタイルを書くアプローチで、CSS ファイルを別途書かずに UI を高速に組み立てられる。Adam Wathan が 2017 年に公開し、2025 年現在は v4 が主流。
概要
従来の CSS は「セマンティックなクラス名（.primary-button）を作って、別ファイルでスタイルを定義」するスタイルが主流でした。Tailwind は その逆 ：
クラス名そのものをスタイルとして使う （
bg-blue-600,px-4,rounded）
これにより、HTML / JSX を見るだけで見た目が把握でき、CSS ファイルとの往復が不要になります。
旧来との比較
// 旧来：クラス命名 + 別 CSS
<button className="primary-button">注文確定</button>
// styles.css で .primary-button { background: blue; ... } を定義
// Tailwind：クラス名で完結
<button className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
注文確定
</button>| 観点 | 旧来 CSS | Tailwind |
|---|---|---|
| ファイル | HTML + CSS の 2 つ | 1 ファイルで完結 |
| 命名 | クラス名を考える必要 | 不要（utility 名そのまま） |
| 削除安全性 | CSS が残り続ける | クラスを消せばスタイルも消える |
| 学習コスト | CSS 全般 | utility 名を覚える |
| デザインの一貫性 | プロジェクトごとに揺れる | 設計済みスケールに収まる |
Tailwind v4 の @theme — Design Tokens 統合
v4 から CSS だけで Design Tokens を定義 できるようになりました。
@theme {
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--font-sans: "Noto Sans JP", sans-serif;
}これで bg-primary, p-md, font-sans のように使えます。 Design Tokens と Tailwind が一体化 し、 アトミックデザイン の Atom 量産基盤になります。
レスポンシブデザイン
ブレークポイントをプレフィックスで指定：
<div className="text-base md:text-lg lg:text-xl">
価格表示
</div>| プレフィックス | 意味 |
|---|---|
| なし | モバイル（基本） |
sm: | 640px 以上 |
md: | 768px 以上（タブレット） |
lg: | 1024px 以上（PC） |
xl: / 2xl: | 1280px / 1536px 以上 |
モバイルファースト が前提。基本スタイル = モバイルとし、md: ・ lg: で大画面向けに上書きする。
ダークモード対応
dark: プレフィックスで両モード対応：
<button className="
bg-white text-slate-900
dark:bg-slate-800 dark:text-white
">
注文確定
</button>トークン側で両モード定義しておくと、コンポーネントがモードを意識せず書けます：
@theme {
--color-bg: #ffffff;
--color-text: #1e293b;
}
@media (prefers-color-scheme: dark) {
@theme {
--color-bg: #0f172a;
--color-text: #f1f5f9;
}
}AI 駆動開発との相性
Tailwind は AI 駆動開発と特に相性が良い ：
| 効用 | 仕組み |
|---|---|
| AI が即書ける | CSS ファイル分離不要、HTML/JSX 内で完結 |
| デザインの一貫性 | tokens を AI が勝手に逸脱できない（bg-blue-500 を生で書かせない設計） |
| レビュー容易 | クラス名を見ればそのまま見た目が分かる |
| 命名疲労からの解放 | .primary-button-large-icon-disabled のような長い名前が不要 |
| プロンプトに含めやすい | クラス名がそのままトークンとして渡せる |
アンチパターン
| 失敗 | 是正 |
|---|---|
生の値を直書き（bg-[#2563eb]） | Design Tokens を @theme で定義し、bg-primary を強制 |
| ダークモードを後付け | 最初から dark: を全 Atom に書き、Storybook で両モード確認 |
| レスポンシブを忘れる | CLAUDE.md に必須要件として明記 |
| クラス名が長すぎ・読めない | @apply で再利用化、または React の variant ライブラリ（CVA）で整理 |
| 既存 BEM や CSS-in-JS と混在 | プロジェクト初期に方針を決める。後から混在を解消するのは大変 |
関連エコシステム
| ツール | 役割 |
|---|---|
| shadcn/ui | Tailwind ベースのコンポーネントカタログ。コピペで組み込む |
| Headless UI | Tailwind 製作元が提供するアクセシビリティ対応の素のコンポーネント |
| Class Variance Authority (CVA) | Tailwind クラスを variant 単位で整理するライブラリ |
| Tailwind Merge | 競合するクラスを統合 |
関連記事
- 開発手法ガイド：アトミックデザイン編 — Atom を Tailwind で量産する
- Web サイト構築の技術選定ガイド — Tailwind を採用する判断基準
関連用語
- Storybook — Tailwind コンポーネントのカタログ化
- アクセシビリティ — Design Tokens でコントラスト比を構造的に保証
- Astro — Tailwind を組み込むフレームワーク例
- SoC（関心の分離） — Utility-First は「スタイルと構造の関心を分けない」という逆張り