Tailwind CSS v4 の変更点と移行ガイド

Tailwind CSS v4 の概要

Tailwind CSS v4 は、設定方式・ビルドエンジン・ユーティリティ体系を根本から刷新したメジャーバージョンです。最大のポイントは 「CSS-first な設定」 への移行です。

主要な変更点

tailwind.config.js が不要に

v3 まで必須だった tailwind.config.js（または .ts）は v4 では不要になりました。テーマのカスタマイズは CSS ファイル内で行います。

/* v4 の設定方法 */
@import "tailwindcss";

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

新しいビルドエンジン（Oxide）

v4 では Rust 製の新しいビルドエンジン「Oxide」が採用され、ビルド速度が劇的に向上しました。フルビルドで最大 5 倍、インクリメンタルビルドで最大 100 倍高速化されています。

PostCSS プラグインの変更

# v3
npm install tailwindcss postcss autoprefixer

# v4
npm install tailwindcss @tailwindcss/postcss

postcss.config.js の設定も変わります：

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

@variant でカスタムバリアント

v4 では @variant ディレクティブで独自のバリアントを定義できます。

@variant dark (&:where(.dark, .dark *));
@variant hocus (&:hover, &:focus);

動的ユーティリティ

v3 では safelist に追加しないと使えなかった動的な値が、v4 では CSS 変数や任意値でより柔軟に扱えます。

<!-- 任意値がより直感的に -->
<div class="grid-cols-[repeat(auto-fill,minmax(200px,1fr))]">

v3 からの移行手順

1. パッケージを更新

npm install tailwindcss@latest @tailwindcss/postcss
npm uninstall autoprefixer

2. CSS ファイルを書き換える

/* v3 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* v4 */
@import "tailwindcss";

3. tailwind.config.js の設定を CSS に移植

// v3 tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { primary: '#1a56db' },
    },
  },
}

/* v4 globals.css */
@theme {
  --color-primary: #1a56db;
}

4. 廃止されたユーティリティを確認

一部のユーティリティは名称変更または廃止されています。公式の 移行ガイド で確認してください。

まとめ

v4 への移行は設定の書き方が変わるため最初はとっつきにくいですが、JS ではなく CSS で完結する設計はシンプルで理解しやすくなっています。新規プロジェクトは v4 から始めるのがおすすめです。