TailwindCSS v4は、フレームワークの内部アーキテクチャを根本から刷新したメジャーアップデートです。新しいエンジン「Oxide」の導入により、ビルドパフォーマンスが劇的に向上し、設定の仕組みも大きく変わりました。v3からの移行を検討している方、あるいはこれからTailwindCSSを導入する方に向けて、v4の新機能と実践的な設計パターンを解説します。
v4最大の変更点は、設定がJavaScriptファイルからCSSファイルに移行したことです。従来の tailwind.config.js は不要になり、CSSの @theme ディレクティブで直接テーマを定義します。
入会申込
ログイン/* app.css */
@import "tailwindcss";
@theme {
--color-primary: #3b82f6;
--color-secondary: #10b981;
--font-display: "Noto Sans JP", sans-serif;
--breakpoint-3xl: 1920px;
}CSS変数として定義されるため、ブラウザの開発者ツールで値を直接確認・変更できるようになりました。デバッグの効率が格段に上がります。
v3ではcontentオプションでスキャン対象のファイルパスを手動指定する必要がありましたが、v4ではプロジェクト内のファイルを自動的に検出します。
/* v3ではtailwind.config.jsで指定が必要だった */
/* content: ['./src/**/*.{js,ts,jsx,tsx}'] */
/* v4では不要！自動検出される */
@import "tailwindcss";.gitignore に記載されたディレクトリは自動的に除外されるため、node_modules のスキャンで時間を浪費することもありません。特定のパスを除外したい場合は @source ディレクティブで制御できます。
@import "tailwindcss";
@source not "./legacy/**";v4では多数の新しいユーティリティが追加されています。特に実用性の高いものを紹介します。
<div class="@container">
<div class="grid grid-cols-1 @md:grid-cols-2 @lg:grid-cols-3">
<!-- コンテナサイズに応じてレイアウト変更 -->
</div>
</div>親コンテナのサイズに応じたレスポンシブデザインが、ビューポート幅に依存せずに実現できます。コンポーネント指向の開発と非常に相性が良い機能です。
<button class="bg-primary/50">半透明</button>
<div class="bg-mix-blue-500/red-500">ミックスカラー</div>CSSの color-mix() 関数を活用した色の合成が直感的に行えます。デザインシステムにおける色のバリエーション生成に役立ちます。
<div class="rotate-x-45 rotate-y-12 perspective-800">
3D変形されたカード
</div>3Dトランスフォームのユーティリティが追加され、パースペクティブ付きのアニメーションが簡単に実装できるようになりました。
v4の新機能を活かすためにも、ユーティリティファーストCSS設計の基本原則を押さえておきましょう。
TailwindCSSでよくある批判が「クラスが長くなりすぎる」というものです。しかし、これはコンポーネント抽出のタイミングを見極めるサインです。
/* 繰り返しパターンが出てきたらコンポーネント化 */
/* React/Vueのコンポーネントとして抽出するのが第一選択 */
/* どうしてもCSSレベルで抽出したい場合のみ @apply */
@layer components {
.btn-primary {
@apply px-4 py-2 bg-primary text-white rounded-lg
hover:bg-primary/90 transition-colors
focus:outline-2 focus:outline-offset-2
focus:outline-primary;
}
}@apply の使用は最小限に留めるのがベストプラクティスです。まずはフレームワークのコンポーネント機構での抽出を検討し、それが適さない場合にのみ @apply を使用します。
v4の @theme を活用して、デザインシステムのトークンを一元管理しましょう。
@theme {
/* スペーシングスケール */
--spacing-page: 2rem;
--spacing-section: 4rem;
--spacing-card: 1.5rem;
/* タイポグラフィ */
--font-size-heading-lg: 2.25rem;
--font-size-heading-md: 1.5rem;
--font-size-body: 1rem;
/* シャドウ */
--shadow-card: 0 2px 8px rgb(0 0 0 / 0.08);
--shadow-modal: 0 8px 32px rgb(0 0 0 / 0.12);
}意味のある名前をつけたトークンを定義することで、デザインの一貫性を保ちながら、変更時の影響範囲を限定できます。
既存のv3プロジェクトからの移行を検討する場合、以下のステップで進めるのが安全です。
tailwind.config.js の内容を @theme ディレクティブに変換します。カスタムプラグインがある場合は個別対応が必要v4のOxideエンジンは、ビルドパフォーマンスに大きな改善をもたらします。公式ベンチマークによると、フルビルドで最大10倍、インクリメンタルビルドで最大100倍の高速化が報告されています。これは、Rustで書かれた新エンジンがCSSのパースと生成を効率的に処理するためです。
さらに、生成されるCSSのサイズも最適化されています。CSSのカスケードレイヤー機能を活用することで、不要なセレクタの重複が削減され、ファイルサイズの削減にも貢献します。開発体験の向上とプロダクション品質の両立を実現したv4は、フロントエンド開発の強力な味方となるでしょう。
