Tailwind CSS v4の新機能と移行ガイド

Tailwind CSS v4 の大きな変更点

Tailwind CSS v4 はこれまでのバージョンから大きく変わりました。最も大きな変更は CSS-first の設定方式 です。

JavaScript から CSS へ

これまでの tailwind.config.js は不要になりました。代わりに CSS ファイルで @theme を使って設定します。

@import "tailwindcss";

@theme {
  --color-primary: #6366f1;
  --color-accent: #7c3aed;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

Vite プラグイン方式

PostCSS プラグインの代わりに、Vite プラグインとして使うことができます。

import tailwindcss from '@tailwindcss/vite';

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

これにより、ビルドが高速化されます。

新しいユーティリティ

v4 ではいくつかの新しいユーティリティが追加されています：

• コンテナクエリ - @container をネイティブにサポート
• カラーミックス - color-mix() の組み込みサポート
• 新しいバリアント - inert:, open: などの新バリアント

まとめ

Tailwind CSS v4 は設定方法が大きく変わりましたが、CSS-first のアプローチにより、より直感的で高速な開発体験を提供しています。