Tailwind CSS 4の新機能まとめ

Tailwind CSS 4は、v3からの大幅なアップデートです。設定ファイルの書き方からビルドシステムまで、多くの変更がありました。

@theme によるデザイントークン定義

従来の tailwind.config.js に代わり、CSSの@themeディレクティブでデザイントークンを定義できるようになりました。

@import "tailwindcss";

@theme inline {
  --color-primary-500: #8DC63F;
  --color-primary-600: #6fa030;
  --color-primary-700: #557a25;
  --font-sans: "Inter", "Noto Sans JP", sans-serif;
}

CSS-first の設定

JavaScriptの設定ファイルではなく、CSSで設定を行う「CSS-first」のアプローチが採用されました。@import "tailwindcss" の一行でセットアップが完了します。

パフォーマンスの向上

新しいエンジン「Oxide」により、ビルド速度が大幅に向上しています。大規模プロジェクトでも快適な開発体験を提供します。

コンテナクエリのサポート

@container を使ったレスポンシブデザインが標準でサポートされるようになりました。

<div class="@container">
  <div class="@sm:flex @lg:grid @lg:grid-cols-2">
    <!-- 親要素のサイズに応じてレイアウトが変化 -->
  </div>
</div>

まとめ

Tailwind CSS 4は「よりCSSらしく、よりシンプルに」という方向性で進化しています。今後開発予定の新規プロジェクトではv4の採用を強くおすすめいたします。