Tailwind CSS v4.0リリース！ — ビルド速度が圧倒的に向上、cascade layersなど最新のCSS機能に対応など、ものすごい数の新機能・改善点をまとめ

1月23日、Tailwind CSS v4.0がリリースされた。

Tailwind CSS v4.0はパフォーマンスと柔軟性を重視しており、再設計された設定手法やカスタマイズ機能、そして最新のWebプラットフォーム技術を最大限に活用している点が特徴である。

以下に、Tailwind CSS v4.0の新機能や改善点について、ポイントを絞って紹介する。

高速化 — フルビルドが最大5倍高速、インクリメンタルビルドでは100倍以上高速化
モダンWeb向けの設計 — cascade layersや@property、color-mix()などの最新CSS機能を活用
インストールの簡素化 — 依存関係を最小化し、CSSファイル内に1行のコードを挿入するだけでセットアップを可能に
Vite向け公式プラグイン — ポストCSSを使うよりもさらに高速な連携を実現
コンテンツ自動検出 — テンプレートファイルのパス指定が不要に
ビルトインの@importサポート — 追加のプラグインなしで複数のCSSファイルをインポート可能
CSSファーストな設定方法 — JavaScriptファイルではなくCSS内でフレームワークの拡張やカスタマイズを行う
CSSテーマ変数 — デザイントークンがCSS変数としてエクスポートされ、あらゆる場所で参照可能
動的なユーティリティ値とバリアント
P3ベースに刷新されたカラーパレット
コンテナクエリ — コンテナサイズを基にスタイリングが可能なAPIをコアに統合
3Dトランスフォームユーティリティ — HTML上で直接3Dの変形を指定できる新しいAPI
拡張されたグラデーションAPI
@starting-styleサポート — 要素の登場時アニメーションをJavaScript不要で実現
not-*バリアント — :not()疑似クラスのほか、メディアクエリや@supportsクエリの否定にも対応
その他多数の新ユーティリティやバリアント — color-scheme、field-sizing、inertなどにもネイティブ対応

以下に、特に注目のトピックについて簡単な説明を行っていく。

新しい高パフォーマンスエンジン

Tailwind CSS v4.0ではフレームワークをゼロから書き直し、徹底的に高速化している。以下は、社内プロジェクトでのベンチマーク比較結果である。

v3.4	v4.0	Improvement
Full build	378ms	100ms	3.78x
Incremental rebuild with new CSS	44ms	5ms	8.8x
Incremental rebuild with no new CSS	35ms	192µs	182x

インクリメンタルビルドは最大100倍以上高速化しており、場合によってはマイクロ秒単位で完了するという。ビルドを繰り返す開発プロセスにおいて、この恩恵は非常に大きい。

モダンWeb向けの設計

Tailwind CSS v4.0では、@layerや@property、color-mix()といった最新のCSS機能を積極的に活用している。
以下が新たに導入されたCSS機能の例である。

ネイティブなcascade layers — スタイルルールの優先度を柔軟に制御可能
登録済みカスタムプロパティ — 大規模ページでもパフォーマンスを向上しつつ、アニメーションなども実現
color-mix() — CSS変数やcurrentColorを含め、あらゆる色に対して不透明度を調整

以下にコメントを挿入したコードを示す。Tailwind CSS特有の機能や、CSSの最新仕様である@propertyルールの使い方などを簡潔に解説している。

/* @layerディレクティブを用いてスタイルをtheme, base, components, utilitiesといったレイヤーに分けて定義 */
@layer theme, base, components, utilities;

/* utilitiesレイヤー */
@layer utilities {
  .mx-6 {
    /* 
      margin-inlineは左右のマージンを論理プロパティとして指定するプロパティ。
      calc(var(--spacing) * 6)により、--spacingというCSS変数に6を掛け合わせた値を左右のマージンとして設定している。
    */
    margin-inline: calc(var(--spacing) * 6);
  }
  .bg-blue-500\/50 {
    /* 
      background-colorにcolor-mix()関数を使用

      'in oklab'という指定は、oklab色空間での合成を意味し、
      sRGBよりも正確な色表現が可能になる場合がある。
    */
    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
  }
}

/*
  @propertyは登録可能なカスタムプロパティを定義するためのルール。
  ここでは--tw-gradient-fromというカスタムプロパティを定義し、
  syntax, inherits, initial-valueなどの振る舞いを指定している。
*/
@property --tw-gradient-from {
  /*  syntax: "<color>"; は、このプロパティがカラーデータを扱うことを示している。 */
  syntax: "<color>"; 
  /* inherits: false; は、このプロパティが子要素には継承されないことを指定している。 */
  inherits: false; 
  /* initial-value: #0000; は、透明色(#0000)を初期値として設定している。これにより、このプロパティをまだ指定していない場合でも透明色が参照される */
  initial-value: #0000;
}

組み込みの`@import`サポート

v4.0以前はpostcss-importなど別途プラグインを導入しないと@importをインライン化できなかったが、v4.0では標準機能として搭載されている。

export default {
  plugins: [
    "postcss-import",
    "@tailwindcss/postcss",
  ],
};

Tailwind CSSに特化したインポートシステムであるため、高速化にも寄与している。

CSSファーストな設定方法

Tailwind CSS v4.0では、JavaScriptの設定ファイル（tailwind.config.js）ではなく、CSS側でフレームワークのカスタマイズを行う方式に移行している。以下は例である。

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  /* ... */
}

これによりカラースケールやユーティリティ、バリアントなどをCSS内で一元管理できるため、設定ファイルが不要になる。

CSSテーマ変数

設定で定義したデザイントークンはCSS変数として出力されるようになり、任意のタイミングで参照可能になる。先ほどの@themeブロック例を元に、生成されるCSSは以下のとおり。

:root {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  /* ... */
}

ランタイムでインラインスタイルへ反映したり、アニメーションライブラリと組み合わせるなど、多彩な使い方が可能になっている。

動的なユーティリティ値とバリアント

v4.0では特定の型に対して、追加の設定や任意値（arbitrary values）を使わなくても動的にユーティリティが生成される機能が強化されている。

たとえば、Tailwind CSS v4.0 では、任意のサイズのグリッドをすぐに作成できる。

<div class="grid grid-cols-15">
  <!-- ... -->
</div>

従来はコンフィグでgridTemplateColumnsに15を追加する必要があったが、v4.0では直接指定可能だ。また以下のようにdata-currentのようなカスタム属性も拡張不要でバリアントとして活用できる。

<div data-current class="opacity-75 data-current:opacity-100">
  <!-- ... -->
</div>

スペーシング系のpx-、mt-、w-、h-なども一元化された変数から動的に生成される。

@layer theme {
  :root {
    --spacing: 0.25rem;
  }
}

@layer utilities {
  .mt-8 {
    margin-top: calc(var(--spacing) * 17);
  }
  .w-17 {
    width: calc(var(--spacing) * 17);
  }
  .pr-29 {
    padding-right: calc(var(--spacing) * 29);
  }
}

コンテナクエリ

@tailwindcss/container-queriesプラグイン不要でコンテナサイズに基づくスタイリングが可能になった。例として以下のように@containerクラスを指定する。

<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">
    <!-- ... -->
  </div>
</div>

また最大幅にも対応した@max-*バリアントが導入されている。

<div class="@container">
  <div class="grid grid-cols-3 @max-md:grid-cols-1">
    <!-- ... -->
  </div>
</div>

`@starting-style`サポート

新たにstartingバリアントが追加され、CSSの@starting-styleを利用できるようになった。要素が表示される際のアニメーションをJavaScriptなしで制御可能になる。

<div>
  <button popovertarget="my-popover">Check for updates</button>
  <div popover id="my-popover" class="transition-discrete starting:open:opacity-0 ...">
    <!-- ... -->
  </div>
</div>

ブラウザ対応状況は限定的であるが、将来的に有望な機能だ。

`not-*`バリアント

:not()疑似クラスやメディアクエリ、@supportsを否定するためのnot-*バリアントが導入されている。

<div class="not-hover:opacity-75">
  <!-- ... -->
</div>

.not-hover\:opacity-75:not(*:hover) {
  opacity: 75%;
}

@media not (hover: hover) {
  .not-hover\:opacity-75 {
    opacity: 75%;
  }
}

以下のように@supportsクエリの否定にも対応する。

<div class="not-supports-hanging-punctation:px-4">
  <!-- ... -->
</div>

.not-supports-hanging-punctation\:px-4 {
  @supports not (hanging-punctation: var(--tw)) {
    padding-inline: calc(var(--spacing) * 4);
  }
}

以上がTailwind CSS v4.0の概要だ。数年にわたる開発の集大成であり、今後のフロントエンド開発にも大きな影響を与えると考えられている。実際に触ってみて、その性能や利便性を確かめてみるとよいだろう。

詳細はTailwind CSS v4.0を参照していただきたい。