Tailwind v4: パラダイムシフト
Tailwind CSS v4は2025年初頭にリリースされ、v3から根本的なアーキテクチャ変更が行われた。最大の変更は「JavaScript設定ファイル（tailwind.config.js）からCSS-first設定への移行」だ。v4ではCSSファイル内で@themeディレクティブを使ってテーマを定義する。PostCSSプラグインは廃止され、独自のOxideエンジン（Rust実装）がCSS解析と生成を担当。ビルド速度はv3比で最大10倍高速化された。
CSS-first Config: @themeの活用
@theme { --color-primary: oklch(0.7 0.15 250); --color-secondary: oklch(0.6 0.12 180); --font-sans: "Inter", "Noto Sans JP", sans-serif; --radius-default: 0.5rem; }
これによりbg-primary、text-secondary等のユーティリティクラスが自動生成される。CSSカスタムプロパティとしてDevToolsでも直接参照可能。KGAでは約80個のデザイントークンを定義している。
デザイントークンの3層構造
KGAが採用している構造: Global Tokens（生の値: --color-blue-500: oklch(...)）→ Component Tokens（セマンティック名: --color-button-primary: var(--color-blue-500)）→ Contextual Tokens（使用コンテキスト: --color-header-bg: var(--color-button-primary)）。ブランドカラー変更はGlobal Tokensの1箇所のみ。ダークモードもContextual Tokensレイヤーで@media (prefers-color-scheme: dark)を使って上書き。
コンポーネントライブラリパターン
CVA（Class Variance Authority）パターンでバリアントを型安全に管理。tailwind-mergeでクラス名競合を自動解決。構成ルール: 1コンポーネント最大15ユーティリティクラス、レスポンシブバリアントは最大3ブレークポイント、インタラクティブ状態はhover/focus-visible/activeの3つに限定。
v3からの移行
主な破壊的変更: tailwind.config.js廃止、@apply挙動変更、一部クラスリネーム、PostCSS廃止。推奨手順: Phase 1（1日）npx @tailwindcss/upgradeで自動移行（80%処理）。Phase 2（2-3日）手動修正。Phase 3（1日）ビジュアルリグレッションテスト。Phase 4（継続）v4新機能の段階的導入。KGAでは中規模（200コンポーネント）を4日で完了。
パフォーマンス実測
CSS生成: v3 380ms → v4 42ms（約9倍）。HMR更新: v4で8ms以下。CSSファイルサイズ: v3 28KB → v4 22KB（gzip後、21%削減）。FCPで約30ms改善を確認。