Tailwind CSS v4.0は、完全にRustで書き直された新しいビルドエンジンを導入し、ビルド速度が最大10倍高速化されました。また、従来の JavaScript 設定ファイル（tailwind.config.js）を廃止し、CSSファイル自体に設定を直接記述するスタイルへ移行しました。

本記事では、フロントエンド開発のトレンドを大きく変えるTailwind CSS v4の主な新機能と、既存プロジェクトを移行するためのマイグレーションガイドを詳しく解説します。

1. Tailwind CSS v4における主要な変更点

1) Rust製コンパイラ「Oxide」による圧倒的なビルド速度

v4の最大のハイライトは、コンパイラエンジンの刷新です。完全にRustでゼロから書き直されたことにより、従来のJavaScriptベースのコンパイルと比較して、開発サーバーの起動やホットリロード（HMR）が最大10倍高速化されました。プロジェクト規模が大きくなるほど、その恩恵を強く実感できます。

2) tailwind.config.js の廃止とCSS設定への移行

これまでTailwindのコアデザインシステムを設定していた tailwind.config.js が廃止され、標準的なCSSのカスタムプロパティ（CSS変数）を使用してスタイルシート内で直接カスタマイズを行うようになりました。

v4での設定の書き方（CSSファースト）

@import "tailwindcss";

@theme {
  --color-brand-primary: #3b82f6;
  --color-brand-secondary: #10b981;
  --font-display: "Outfit", sans-serif;
}

CSS内でテーマを定義すると、コンパイラが自動的にユーティリティクラス（bg-brand-primary や font-display など）をビルド時に生成します。

3) @import によるディレクティブの統合

従来の @tailwind base;、@tailwind components;、@tailwind utilities; という3つの記述が、シンプルな @import "tailwindcss"; の1行に統合されました。

2. 実践的マイグレーションガイド

既存の v3 プロジェクトから v4 へ移行する際の手順をステップバイステップで示します。

ステップ1: パッケージのアップグレード

npm（またはyarn / pnpm）を使用して、最新のパッケージをインストールします。

npm install tailwindcss@next @tailwindcss/postcss@next

(注: 2026年現在、v4は安定版として各ビルドツール用インテグレーションパッケージとともに提供されています)

ステップ2: 設定ファイルのCSS移行

既存の tailwind.config.js に記述されていたカスタム設定を、メインのCSS（例: global.css）の @theme ディレクティブ内に移植します。

- // tailwind.config.js
- module.exports = {
-   theme: {
-     extend: {
-       colors: {
-         customGray: '#1e293b',
-       }
-     }
-   }
- }

+ /* global.css */
+ @import "tailwindcss";
+ @theme {
+   --color-custom-gray: #1e293b;
+ }

ステップ3: PostCSS設定の更新

プロジェクトの postcss.config.js で、新しいプラグインを参照するように書き換えます。

// postcss.config.js
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

3. v4で追加された便利なユーティリティクラス

移行にあたり、v4で新しく使えるようになった注目すべきスタイル機能を紹介します。

• より柔軟なグリッド割り当て: CSS Subgridのサポート強化に伴い、明示的なサブグリッド指定子（grid-rows-subgrid や grid-cols-subgrid）がユーティリティとして標準装備されました。
• 3Dトランスフォームのサポート: 遠近感（perspective）や3D回転などの演出が、インラインクラスだけで表現可能になりました（例: transform-3d、rotate-y-180 など）。
• コンテナクエリ（Container Queries）のネイティブ化: これまでプラグインが必要だったコンテナクエリが標準機能となり、@container クラスを用いて親要素のサイズに基づいたレスポンシブデザインが容易になりました。

4. まとめ：移行すべきか？

コンパイル速度の向上だけでも、日々の開発体験が劇的に変化するため、新規プロジェクトでの採用はもちろん、既存プロジェクトでも段階的に移行を進める価値は十分にあります。CSS標準機能と融合し、よりシンプルで高速になったTailwind CSS v4のパワーを体感してください。