Tailwind CSS

Tailwind CSS とは

Tailwind CSS は、bg-blue-500、text-lg、flex、gap-4 のようなユーティリティクラスを HTML に直接記述してスタイルを構築する CSS フレームワークである。Adam Wathan が中心となって開発し、最初のバージョンは 2017 年 11 月に公開された。ユーティリティファーストという設計を広めた代表的なフレームワークである。

従来の CSS との比較

従来の CSS はセマンティックなクラス名を定義して別ファイルにスタイルを書くが、Tailwind はユーティリティクラスを HTML に直接記述する。CSS ファイルの管理が不要になり、クラス名の命名に悩む必要もなくなる反面、HTML が冗長になる。

<!-- 従来の CSS: セマンティックなクラス名 + 別ファイルのスタイル -->
<button class="primary-button">Click</button>
<style>
.primary-button { background: #3b82f6; color: white; padding: 8px 16px; border-radius: 4px; }
.primary-button:hover { background: #2563eb; }
</style>

<!-- Tailwind: ユーティリティクラスを直接記述 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Click</button>

メリットとデメリット

採用の判断は、HTML の読みにくさと引き換えに何を得るかの見極めになる。

レスポンシブデザイン

ブレークポイントはクラス名のプレフィックスで表すため、スタイルの分岐が HTML の中で完結する。

<!-- モバイル: 1列、タブレット: 2列、デスクトップ: 3列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-white p-4 rounded shadow">Card 1</div>
  <div class="bg-white p-4 rounded shadow">Card 2</div>
  <div class="bg-white p-4 rounded shadow">Card 3</div>
</div>

md: (768px 以上)、lg: (1024px 以上) のプレフィックスでブレークポイントを指定する。モバイルファーストで、プレフィックスなしがモバイルのスタイルだ。

クラスはどう集まるのか

Tailwind はソースファイルをコードとして解析せず、単なるテキストとして走査する。クラス名になり得るトークンを拾い、そのうちフレームワークが知っているユーティリティに対応するものだけを CSS として出力する。だから設定なしでも出力が小さく保たれ、w-[327px] のような任意の値もその場で生成できる。

この仕組みには重要な落とし穴がある。文字列の連結や補間はテキスト走査では追えないため、クラス名を動的に組み立てても生成されない。

// 生成されない: text-red-600 というトークンがソースに現れない
<div className={`text-${color}-600`} />

// 生成される: 完全なクラス名がソースに現れる
<div className={color === 'error' ? 'text-red-600' : 'text-green-600'} />

条件分岐で完全なクラス名を書き分けるか、あらかじめ対応表を用意してその値を渡す。ビルドは通るのにスタイルだけが当たらないため、原因を掴みにくい類の不具合になる。

Tailwind v4 の変更点

v4.0 は 2025 年 1 月に公開され、設定の置き場所とビルドの仕組みが大きく変わった (2026 年 8 月時点の系列は 4.3 系)。

• 設定の既定が CSS 側へ移り、tailwind.config.js は自動では読まれなくなった。引き続き使う場合は CSS で @config "../../tailwind.config.js" と明示して読み込む
• 新しいビルドエンジンにより、公式の測定でフルビルドが最大 5 倍、差分ビルドが 100 倍以上速くなった
• テーマ値は CSS の @theme ディレクティブで定義し、そのまま CSS 変数として使える

/* Tailwind v4: CSS ファイルで設定 */
@import "tailwindcss";
@theme {
  --color-primary: #3b82f6;
  --font-sans: 'Inter', sans-serif;
}

Bootstrap との比較

同じ CSS フレームワークでも、部品を与えるか材料を与えるかという方向が逆である。

Next.js との統合

create-next-app で Tailwind を選ぶと、必要な設定が入った状態でプロジェクトが生成されるため、導入時に手を入れる箇所はほとんどない (2026 年 8 月時点)。既存プロジェクトへ後から入れる場合は、ビルドツール側のプラグイン設定と、テーマを書く CSS の読み込みの 2 点を押さえれば動く。

なお、ユーティリティファーストは既存の手法と排他ではない。ブレークポイントの設計は レスポンシブデザイン の考え方をそのまま使い、色や余白の値をどう決めるかは デザインシステム の領域に残る。コンポーネント単位でスタイルを閉じ込めたい部分だけ CSS Modules と併用する構成も現実的である。