Tailwind CSS v4がリリース
Tailwind CSS v4が2025年初頭に正式リリースされました。ユーティリティファーストCSSフレームワークとして圧倒的な人気を誇るTailwindの最新バージョンは、内部アーキテクチャを根本から作り直した意欲的なアップデートです。
v3まではJavaScriptベースのビルドエンジンでしたが、v4ではRustで書かれた新エンジン「Oxide」を搭載。ビルド速度は最大10倍に向上しています。
最大の変更点：CSSファーストの設定
v4で最もインパクトがあるのは、設定方法の変更です。v3まではtailwind.config.jsというJavaScriptファイルで設定を行っていましたが、v4ではCSSファイルの中で直接設定するスタイルに変わりました。
@import "tailwindcss";
@theme { --color-primary: #3b82f6; --font-sans: "Inter", sans-serif; }
CSSの@themeディレクティブでカスタムカラーやフォントを定義するので、JavaScriptの設定ファイルが不要になるケースがほとんどです。モダンCSSのトレンドとも合致した方向性ですね。
Oxide Engine
v4の心臓部がRust製のOxide Engine。主な恩恵は3つあります。
1つ目はビルド速度。フルビルドが最大10倍、インクリメンタルビルドがほぼ瞬時に。大規模プロジェクトでは体感的な差が大きく、開発体験が明らかに向上します。
2つ目は自動コンテンツ検出。v3ではpurgeの対象ファイルを手動で設定する必要がありましたが、v4ではプロジェクトのファイルを自動的にスキャンして、使われているクラスだけを出力します。設定ミスで必要なクラスが消えてしまう、というトラブルが減るのは嬉しいポイント。
3つ目は出力サイズの最適化。不要なCSSの除去がより高精度になり、本番ビルドのCSSファイルサイズがさらに小さくなっています。
新機能ハイライト
CSSカスケードレイヤー対応
v4では出力されるCSSが@layerで構造化されるようになりました。@layer theme, base, components, utilities;という層構造により、独自のCSSとTailwindのユーティリティが衝突するリスクが大幅に減ります。Interop 2026でもカスケードレイヤーの互換性改善が取り上げられており、タイミングとして絶好ですね。
ゼロコンフィグ
多くのプロジェクトでは、CSSファイルに@import "tailwindcss"と1行書くだけで使い始められます。設定ファイルが不要な「ゼロコンフィグ」が標準に。必要になったら@themeでカスタマイズを追加していく、という段階的なアプローチが可能です。
新しいユーティリティ
コンテナクエリ（@container）対応のユーティリティ、3D Transform関連のユーティリティ、field-sizing: contentによるテキストエリアの自動リサイズなど、新しいCSSプロパティに対応したユーティリティが追加されています。
v3からの移行
Tailwindチームは公式の移行ツールを提供しています。
npx @tailwindcss/upgrade
これを実行すると、tailwind.config.jsの設定をCSS形式に変換し、v4で非推奨になったクラスを自動的に置き換えてくれます。完全に自動化できないケースもありますが、大部分はツールに任せられるので移行コストはそこまで高くありません。
破壊的変更に注意
いくつかの破壊的変更があります。@applyの挙動変更、一部のデフォルト値の変更、プラグインAPIの更新など。公式アップグレードガイドを事前に確認しておくことをおすすめします。
コミュニティの反応
コミュニティの反応は概ね好意的です。「ビルドが速すぎて驚いた」「設定ファイルがなくなって嬉しい」という声が多い一方、「CSSファイルで設定するのは慣れが必要」という意見も。JavaScript依存からの脱却を歓迎する開発者にとっては、正しい方向への進化と感じるのではないでしょうか。
まとめ
Tailwind CSS v4は、CSSファーストの設計思想とRust製エンジンによる高速ビルドで、開発体験を大幅に改善しました。v3ユーザーは移行ツールを使って段階的にアップグレードできますし、新規プロジェクトではv4から始めない理由がありません。公式サイトのドキュメントも刷新されているので、ぜひチェックしてみてください。