Tailwind v4 は『CSS への回帰』が大きなテーマ
Tailwind CSS v4 では JS 設定から CSS-first config への移行、Rust 製 Oxide エンジンによる高速化が実現されました。本記事では編集部の視点で、v4 の新機能を公開情報をもとに整理します。Tailwind CSS 実践 もご参考に。
v4 の主要な変化
(1) CSS-first configuration：@theme で設定。(2) Oxide エンジン：Rust 製で5倍速(公開情報をもとに)。(3) カスタムカラーモデル：oklch 等。(4) Container Queries標準サポート。(5) JIT/AOT 統合。
CSS-first config
(1) tailwind.config.js 不要(任意)。(2) @theme ブロックで設定。(3) --color-* / --font-* 等のカスタム変数。(4) JS が必要な部分のみtailwind.config に。(5) 移行は段階的に可能。
Oxide エンジン
(1) Rust 実装で高速化。(2) incremental rebuild：HMR が高速。(3) Bundle サイズ削減。(4) 大規模プロジェクトで顕著。(5) esbuild/Vite/Turbopackと統合。Vite ビルドチューニング もご参考に。
カラーシステムの進化
(1) P3 wide gamut：色域拡大。(2) oklch カラースペース：感覚的均一性。(3) --color-* CSS Variables。(4) 動的テーマがより容易。(5) アクセシビリティ向上。
Container Queries
(1) @container：親要素ベースの分岐。(2) cqw/cqh/cqi/cqb：コンテナ単位。(3) レスポンシブ設計の革新。(4) main breakpointsとの併用。(5) v4 で標準対応。
マイグレーション
(1) v3 → v4 移行ツール：公式提供。(2) 段階的に：互換モード活用。(3) カスタムプラグイン：書き直し必要。(4) shadcn/ui 等：対応進行。(5) 1〜2スプリント程度の移行コスト。shadcn/ui 実践 もご参考に。
失敗しがちなパターン
(1) v3 と v4 混在：プラグイン非互換。(2) カスタムプラグイン放置。(3) Container Queries 乱用：可読性低下。(4) theme 設定散在。(5) 移行で破壊変更見落とし。対策は、(1)v4 統一、(2)書き直しスケジュール化、(3)主要なら main breakpoints、(4)@theme 集約、(5)changelog 熟読、です。