第29章 Tailwind v4

29.1 v4 が目指したもの

第2章で見たとおり、v4 は「コードネーム Oxide」と呼ばれた新エンジンの開発から始まり、当初は v3.x の一部として計画されていたものが、あまりに大きな変化のため v4.0 として 2025 年 1 月にリリースされました。v4 が目指したのは、大きく 3 つです。

1. 速度: ビルドを劇的に速くする。
2. モダン CSS の全面採用: ここ数年で進化した CSS の新機能を土台にする。
3. 設定の簡素化: 設定を CSS に寄せ、周辺ツールを減らす。

本書はこの v4 を一貫して前提にしてきました。この章では、これまで各所で触れてきた v4 の変更点を、ひとつの見取り図としてまとめます。

29.2 新エンジン（Oxide / Lightning CSS）の内部

v4 はソース走査など性能が重要な部分に Rust を使い、CSS の生成処理には TypeScript の実装も残っています（第4章）。Lightning CSS はプレフィックス付与・構文変換・最適化などを担当し、@import の展開は Tailwind 側で行います。

この刷新により、公式（v4.0 時点）の計測ではフルビルドが約 3.8 倍、増分ビルドが約 8 倍以上速くなりました。同時に、以前は別途必要だった postcss-import や autoprefixer が Tailwind 単体に取り込まれ、周辺ツールの設定が減ったのも大きな実利です（第7章）。

29.3 CSS ファースト設定への全面移行

v4 最大の思想的変化が、設定を JavaScript から CSS へ移したことです（第5章）。

/* v4: 設定は CSS の中に書く */
@import "tailwindcss";

@theme {
  --color-brand: oklch(0.45 0.24 264);
  --breakpoint-3xl: 120rem;
}

v3 までの tailwind.config.js（JavaScript）は必須ではなくなりました。「CSS のための設定を、CSS で書く」という自然な形への回帰です。しかも第5章で見たとおり、使用する @theme の変数は CSS 変数としても出力され、同じ定義を共有できます。未使用変数は省略されるため、JavaScript からだけ参照する値などは @theme static または通常の :root で出力を保証します。

29.4 モダン CSS の全面採用

v4 は「自分で何でも実装する」のではなく、進化したブラウザのネイティブ機能に乗る方針を取りました。具体的には、

• カスケードレイヤー（@layer）: 詳細度の戦いを構造的に解決（第4章）。
• 登録済みカスタムプロパティ（@property）: アニメーション可能な CSS 変数などを実現。
• color-mix(): bg-black/50 の不透明度合成に使用（第12章）。
• 論理プロパティ: padding-inline などで多言語（RTL）対応（第10章）。

これは「Tailwind が薄くなった」ことを意味します。ブラウザができることはブラウザに任せ、Tailwind はそれを使いやすくする層に徹する——この方向性は第30章のテーマにもつながります。

29.5 Container Queries・3D transform・@starting-style の標準化

v3 ではプラグインが必要だった、あるいは存在しなかった機能が、v4 でコアに入りました。

• Container Queries（@container / @md:）: 祖先コンテナの幅に応じたレイアウト（第14章・第17章）。
• 3D transform（rotate-x-* など）: 立体的な変形（第19章）。
• @starting-style（starting: バリアント）: JavaScript なしの入場アニメーション（第19章）。

いずれも「モダン CSS をユーティリティのまま使えるようにする」という v4 の性格をよく表しています。

29.6 v3 → v4 移行の実務

既存の v3 プロジェクトを v4 に上げるときの要点です。第7章でも触れた移行ツールが主役です。

npx @tailwindcss/upgrade

@config の互換読込でも旧 corePlugins・safelist・separator はサポートされません。旧 safelist の用途には @source inline() を使います（第5章）。また、hover のメディア条件とバリアントの合成順の変更も確認してください（第6章）。

このツールは大部分を自動で変換してくれます（Node.js 20 以上が必要）。主な破壊的変更は次のとおりです。

加えて、v4 はモダンブラウザ（Safari 16.4+ / Chrome 111+ / Firefox 128+）が前提です。古いブラウザを手厚くサポートする必要があるプロジェクトは、無理に上げず v3.4 に留まる判断もありえます。移行は「ツールで自動変換 → 差分を確認 → 手で微修正」の順で、小さく進めるのが安全です。

参考資料

• Tailwind CSS v4.0（2025-01-22）
• 「Open-sourcing our progress on Tailwind CSS v4.0」（新エンジン Oxide）
• Tailwind CSS Docs — Upgrade guide（v3 → v4）