Tailwind CSS v4 の新機能まとめ

Tailwind CSS v4 が変えるスタイリング

Tailwind CSS v4は従来のtailwind.config.jsから脱却し、CSSファイル内で直接設定を行う新しいアプローチを採用しました。

1. @import ベースの設定

@import 'tailwindcss';
@theme {
  --color-brand: #6366f1;
}

2. CSS変数の全面活用

すべてのデザイントークンがCSS変数として公開され、JavaScriptなしでテーマ切り替えが可能になりました。

3. 高速ビルド

Rustベースの新エンジンにより、ビルド時間が最大10倍高速化されました。

4. 新ユーティリティ

• field-sizing-content: テキストエリアの自動リサイズ
• inert: インタラクション無効化
• コンテナクエリの強化

まとめ

v4への移行は段階的に行えますが、設定ファイルの書き方が根本的に変わるため早めのキャッチアップを推奨します。