Tailwind CSS 4の新機能と移行のポイント

Tailwind CSS 4の革新

Tailwind CSS 4は、設定ファイルの概念を根本から刷新しました。従来のtailwind.config.jsによるJavaScriptベースの設定から、CSSファイル内で直接テーマを定義するCSS-firstのアプローチに移行しています。

@themeによるテーマ定義

新しい@themeディレクティブにより、デザイントークンをCSSネイティブに管理できるようになりました。

@import "tailwindcss";

@theme {
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --font-sans: 'Noto Sans JP', sans-serif;
}

CSS変数として定義されるため、ブラウザのDevToolsで直接確認・調整できるのが大きな利点です。JavaScriptの設定ファイルを行き来する必要がなくなりました。

Viteプラグインへの統合

Tailwind CSS 4では、PostCSSプラグインに加えてViteプラグインとしての利用が推奨されています。これにより、HMR（Hot Module Replacement）のパフォーマンスが飛躍的に向上しました。

// vite.config.ts
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss()],
});

当社の計測では、スタイル変更時のHMR反映速度が従来比で約5倍高速化しています。

移行時の注意点

移行で最も影響が大きいのは、@applyの挙動変更とカスタムカラーの定義方法です。v3ではtailwind.config.jsのtheme.extendで定義していたカラーパレットを、@themeブロック内のCSS変数に書き換える必要があります。

また、一部のプラグイン（@tailwindcss/typographyなど）はv4対応版の確認が必要です。段階的な移行を行い、各ページの表示を確認しながら進めることを推奨します。

ビルドツールとの統合がシームレスになったTailwind CSS 4は、モダンなフロントエンド開発に不可欠なツールとして、さらに進化しています。