Tailwind CSS 4.2がWebpackプラグイン、新カラーパレット、論理プロパティユーティリティをリリース

Tailwind CSS はバージョン 4.2.0 をリリースしました。これはユーティリティファーストの CSS フレームワークである Tailwind CSS のマイナーだが意味のあるアップデートで、v4.0 で導入されたアーキテクチャの刷新を基盤としています。2026 年 2 月 18 日にタグ付けされたこのリリースには、公式の webpack プラグイン、4 つの新規デフォルトカラーパレット、拡張された論理プロパティユーティリティ、そしてフロントエンドコミュニティの注目を集めている顕著な再コンパイル速度の向上が含まれています。 多くのチームにとっての見どころは、@tailwindcss/webpack パッケージの追加です。これにより、手動の PostCSS 設定を必要とせずに Tailwind を webpack パイプラインに組み込むことができます。以前、webpack を使用する開発者は PostCSS を介して Tailwind を接続する必要があり、v4.0 で提供されたクリーンな Vite 統合とは対照的に、定型コードを追加する必要がありました。新しいプラグインはこのプロセスを大幅に簡素化します。 これにより、webpack プロジェクトは統合のシンプルさにおいて Vite と同等になり、ビルドツールチェーンを移行する準備がまだできていない既存のアプリケーションで作業しているチームにとって特に歓迎すべきものです。 ビジュアル面では、4.2 は Tailwind のデフォルトテーマに mauve、olive、mist、taupe という 4 つの新規_named_パレットを追加しました。これらのくすんだニュートラル寄りのトーンは、飽和したパレットから離れるというより広範なデザイントレンドの移行を反映しており、Tailwind のビルトインテーマ内で作業するデザイナーがカスタム設定に頼ることなく、より表現豊かな範囲を得られるようにしています。 今回のリリースでは、論理プロパティのサポートが大幅に拡大しました。Tailwind には、ブロック方向のパディング (pbs-*, pbe-*)、マージン (mbs-*, mbe-*)、ボーダー (border-bs, border-be)、スクロールパディング、スクロールマージンに関するユーティリティに加え、CSS の inline-size プロパティおよび block-size プロパティに直接マッピングする新しいインラインサイズとブロックサイズのユーティリティが含まれています。これらの追加機能は、右から左への書き方や縦書きモードなどを考慮する必要がある多言語製品の開発において特に重要です。以前のバージョンで導入された start-* および end-* ユーティリティは、より意味的に整合性の取れた inline-s-* および inline-e-* の同等機能に取って代わられ、非推奨となりました。開発者からの LinkedIn でのコメントでは、この変更の重要性が指摘され、「多言語レイアウトにおいて論理プロパティは CSS の未来である」という投稿がありました。 おそらく今回のリリースで最も議論の的となった側面は、コンパイルパフォーマンスの大幅な向上です。Vercel の Next.js リードである Tim Neutkens 氏は X 上で、Tailwind のコンパイル速度を調査した結果、最大規模のアプリケーションにおける再コンパイルで 3.8 倍の速度向上を測定したと投稿しました。 Tailwind CSS 4.2.0 には、大きなパフォーマンス改善が含まれています。 最大規模のアプリケーションにおける再コンパイル（任意の変更）で 3.8 倍の速度向上を測定しました。 Next.js、Vite、Webpack、PostCSS の統合すべてに適用されます。 まだ Tailwind CSS v3 を使用しているチームにとって、v4 へのアップグレードパスは別個でより複雑なステップとなります。Tailwind は v3 と v4 の間のすべての破壊的変更をカバーする専用のアップグレードガイドを提供しており、CSS 中心の設定への移行、@apply の動作の変更、および更新されたブラウザサポート要件（Safari 16.4+、Chrome 111+、Firefox 128+）が含まれます。また、機械的な変更の大部分を処理するために、npx @tailwindcss/upgrade を介して自動化されたマイグレーションツールも利用可能です。@apply を使用しているチームからは、移行過程にいくつかの粗削な点があることが指摘されており、それに依存するコンポーネントライブラリが追加の再作業を必要としたケースを文書化した GitHub 上の長丁場の議論が存在します。 Tailwind CSS は、マークアップ内で直接スタイルを適用するための低レベルでコンポーザブルなユーティリティクラスを提供する、ユーティリティファーストの CSS フレームワークです。各コンポーネントに対して個別の CSS を記述するのではなく、チームは事前定義されたユーティリティ（設定を通じて拡張可能）を組み合わせてデザインを構築するため、コードベース全体でスタイルの一貫性を保ちながら UI 開発のスピードを向上させることができます。 著者について Daniel Curtis Daniel Curtisは、イギリス・バーミンガムに拠点を置くソフトウェアコンサルティング会社Griffiths WaiteのUI開発マネージャーです。彼はTypeScriptをスタック全体で活用し、革新的なエンタープライズソリューションの提供に重点を置いて、フロントエンドエンジニアリングの取り組みをリードしています。DanielはモダンなWebアーキテクチャ、開発者体験（Developer Experience）、そしてソフトウェア納品の支援や製品内の実際の顧客課題解決のためにAIを活用することに情熱を注いでいます。 詳細を表示表示を閉じる

Tailwind CSS 4.2がWebpackプラグイン、新カラーパレット、論理プロパティユーティリティをリリース

背景や根拠まで確認しますか？

このニュースを、実務の判断につなげる

調べる

選ぶ

サイト