Tailwind CSS v4——「設定ファイルなし」「10倍高速」で設計が根本から変わる

Tailwind CSS v4は「別のフレームワーク」と思ったほうがいい

2025年1月に正式リリースされたTailwind CSS v4は、v3との後方互換性をある程度保ちながらも、設計思想が根本から変わっています。米国のフロントエンドコミュニティでは「Tailwind v4はv3の改善版ではなく、再設計版だ」という評価が多く、すでにNext.js・Nuxt・SvelteKitの公式スターターにも採用されています。

v4の最大の変更点3つ

• 設定ファイルレス（tailwind.config.js が不要に）：カスタマイズはCSSファイルの @theme ディレクティブで直接記述します。JavaScriptの設定を学ぶ必要がなくなり、CSSだけで完結します。
• Lightning CSS採用でビルドが最大10倍高速化：Rustで書かれたCSSパーサー「Lightning CSS」をエンジンとして採用。大規模プロジェクトでのビルド時間が劇的に短縮されます。
• CSSカスタムプロパティ（変数）ネイティブ対応：テーマカラーがCSSカスタムプロパティとして自動出力されるため、JavaScript不要でダークモード切り替えなどが実装できます。

インポート方法も変わった

v3では tailwind.config.js と @tailwind base; などのディレクティブが必要でしたが、v4では1行で完結します。

• v3: @tailwind base; @tailwind components; @tailwind utilities;
• v4: @import "tailwindcss";

この変更により、PostCSSの設定も不要になるケースが多く、新規プロジェクトのセットアップが大幅に簡略化されます。

v3からの移行で注意すること

• JIT（Just-in-Time）モードはv4では標準のため廃止：v3でJITを明示していた設定は削除する
• 一部のユーティリティクラス名が変更：例えば shadow-sm の挙動など細かな差異がある。公式マイグレーションガイドの確認が必須
• プラグインAPIが変更：サードパーティプラグイン（daisyUI等）のv4対応版への更新が必要

日本のフロントエンドへの影響（約4ヶ月後）

日本では2025年末〜2026年前半にかけてv4採用プロジェクトが増加すると予測されます。特に新規のNext.js・SvelteKitプロジェクトではv4がデフォルトになりつつあります。v3の知識は引き続き有効ですが、新規案件のためにv4の @theme 構文とLightning CSSの挙動を今から把握しておくことで、転職・フリーランス案件での即戦力アピールができます。