Tailwind CSS v4の新機能 - CSSファーストエンジンとパフォーマンス改善

Tailwind CSS v4のCSSファースト設計

Tailwind CSS v4が2025年1月にリリースされました。最大の変化はCSSファーストの設計です。つまり、tailwind.config.jsが不要になりました。CSSファイルだけで設定が完結します。

具体的には、@import “tailwindcss”の1行で開始できます。またカスタマイズもCSS内の@themeディレクティブで行います。さらにテンプレートファイルのパスを自動認識する機能も追加されました。そのため、設定ファイルの管理が大幅に簡素化されています。

v4では完全な書き直しによりパフォーマンスが大幅に向上しました。フルビルドは3.78倍高速化しています。具体的には378msから100msに短縮されました。

さらにインクリメンタルビルドはCSS変更時で8.8倍高速です。また、CSS変更なしの場合は182倍高速化されています。つまり、35msからわずか192マイクロ秒になりました。そのため、開発中のフィードバックループが劇的に改善されています。

新しいユーティリティやバリアントも多数追加されました。まずコンテナクエリに対応しています。また角度付きグラデーションやコニックグラデーションも使えます。

さらに3Dトランスフォームにも対応しました。具体的にはrotate-xやperspectiveなどのユーティリティです。加えて、not-*やinert、nth-*などの新バリアントもあります。特に色パレットがrgbからoklchに移行し、より鮮やかな色を表現できるようになりました。

移行には自動アップグレードツールが提供されています。また詳細なアップグレードガイドも公式サイトにあります。つまり、段階的に移行を進められます。さらにTailwind Playで直接v4を試すこともできます。したがって、まずは小さなプロジェクトで試してみることをおすすめします。

Tailwind CSS v4はCSSファースト設計と大幅なパフォーマンス改善が特徴です。特にビルド速度の向上と設定の簡素化が魅力です。したがって、Tailwindユーザーはぜひv4への移行を検討してみてください。