Tailwind CSS v4の新機能まとめ：Rust製エンジンで爆速化、CSSファーストへ大転換

Tailwind CSS v4の概要

2025年1月にリリースされたTailwind CSS v4は、フレームワークの根本的な再設計です。最大の変化はCSSファーストアプローチへの転換。tailwind.config.jsが不要になり、CSS内で直接設定を記述できるようになりました。

主要な変更点

1. Rust製Oxideエンジン

v4のビルドエンジンはRustで書き直されました。これにより：

フルビルド: 最大10倍高速化
インクリメンタルビルド: 最大100倍高速化
依存関係の削減: PostCSSやautoprefixerが不要に

2. CSSファーストの設定

v3（従来）：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
}

v4（新方式）：

/* app.css */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --font-sans: 'Inter', sans-serif;
}

設定ファイルが消え、CSSの中で全て完結します。

3. CSSインポートで導入

v3の3行のディレクティブが、1行のインポートに変わりました。

v3：

@tailwind base;
@tailwind components;
@tailwind utilities;

v4：

@import "tailwindcss";

4. 自動コンテンツ検出

v3ではcontent配列でスキャン対象のファイルを指定する必要がありましたが、v4では自動的にプロジェクト内のファイルを検出します。.gitignoreに記載されたディレクトリは自動で除外されます。

5. @themeによるデザイントークン

新しい@themeディレクティブで、カスタムのデザイントークンを定義できます。

@import "tailwindcss";

@theme {
  /* カラー */
  --color-brand: #6366f1;
  --color-brand-light: #818cf8;

  /* スペーシング */
  --spacing-18: 4.5rem;

  /* ブレークポイント */
  --breakpoint-3xl: 1920px;

  /* アニメーション */
  --animate-slide-in: slide-in 0.3s ease-out;
}

@keyframes slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

定義したトークンはそのままユーティリティクラスとして使えます：

<div class="bg-brand text-brand-light p-18 animate-slide-in">
  カスタムトークンを直接使用
</div>

新しいユーティリティ

コンテナクエリ

<div class="@container">
  <div class="@sm:flex @lg:grid @lg:grid-cols-3">
    コンテナの幅に応じてレイアウト変更
  </div>
</div>

3Dトランスフォーム

<div class="rotate-x-45 rotate-y-12 perspective-500">
  3D変換が直接指定可能に
</div>

フィールドサイジング

<textarea class="field-sizing-content">
  コンテンツに合わせて自動リサイズ
</textarea>

カラーミキシング

<div class="bg-red-500/50 mix-blend-multiply">
  カラーミキシングのユーティリティ
</div>

v3からの移行方法

公式の移行ツールが提供されています。

npx @tailwindcss/upgrade

このコマンドを実行すると：

tailwind.config.jsの設定を@themeに変換
postcss.config.jsのTailwind関連設定を更新
非推奨クラスを新しいクラスに置換
CSSのディレクティブを新形式に変更

主な破壊的変更

| v3 | v4 | |---|---| | bg-opacity-50 | bg-black/50 | | ring-offset-2 | ring-offset-2（変更なし） | | shadow-sm | shadow-xs（名称変更） | | blur-sm | blur-xs（名称変更） |

Next.jsプロジェクトでの導入

npm install tailwindcss @tailwindcss/postcss

// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

/* globals.css */
@import "tailwindcss";

これだけで動作します。tailwind.config.jsは不要です。

パフォーマンスの実測

v3とv4のビルド時間を比較しました（500コンポーネント規模のプロジェクト）。

| 項目 | v3 | v4 | 改善率 | |------|-----|-----|--------| | フルビルド | 1,200ms | 120ms | 10倍 | | インクリメンタル | 300ms | 3ms | 100倍 | | CSSファイルサイズ | 45KB | 38KB | 15%削減 |

開発中のホットリロードが体感できるレベルで速くなります。

まとめ

Tailwind CSS v4は「CSSファースト」への大転換です。

設定ファイル不要：CSS内で@themeを使って直接カスタマイズ
Rust製エンジン：ビルド速度が劇的に改善
新ユーティリティ：コンテナクエリ、3Dトランスフォーム等
移行ツール完備：npx @tailwindcss/upgradeで自動変換

既存プロジェクトでも移行ツールを使えばスムーズに移行できます。新規プロジェクトなら迷わずv4を選びましょう。