はじめに

みなさんお久しぶりです！Web エンジニアの yoshimo（nakamoto）です。
今回は Tailwind CSS v4.0 の主な変更点について、遅ればせながら共有します。

New high-performance engine

まず、今回 Tailwind CSS v4.0 のビルドエンジンが Golang から Rust に書き直され、ビルドはかなり高速になりました。具体的には、Catalyst という Tailwind CSS チームが作っているコンポーネントライブラリをビルドするときの時間はこちらになります。インクリメンタルビルドとは変更箇所のみの差分リビルドです。

フルビルドは 3.78倍高速化し、新しい CSS ありのインクリメンタルビルド（新しいユーティリティを追加時）は8.8倍高速化し、新しい CSS なしのインクリメンタルビルド（あるところに使っているユーティリティを他のところに追加時）は182倍高速化し、マイクロ秒単位になってます。

アプリの規模が大きくなればなるほど flex, col-span-2, font-bold などの同じユーティリティを繰り返す使うことになるため「新しい CSS なしのインクリメンタルビルド」の恩恵が受けられます。

Designed for the modern web

続いて、モダンウェブ向けのデザインについてです。1つ目に、カスケードレイヤー（@layer）で、スタイルの優先度をレイヤーに分けて管理できるようになりました。これによって、スタイル同士の相互作用を制御できるため、下記の components のスタイルが utilities のスタイルに上書きされる事はありません。

@layer theme, base, components, utilities;

2つ目に @property によって、カスタムプロパティを自作できます。グラデーションの色変化などのアニメーションに用いられます。

@property --tw-gradient-from {

  syntax: "<color>";

  inherits: false;

  initial-value: #0000;

}

3つ目に color-mix() 関数で、CSS 変数, currentColor などのあらゆる色の不透明度を調整できます。デザイナーさんからある色を10% 薄くするという依頼を受けたときにこの関数によって簡単に対応できそうです。

.bg-blue-500\/50 {

  background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);

}

4つ目に、ロジカルプロパティによって RTL サポートを簡素化し、生成される CSS のサイズを縮小できます。margin-inline（左右）と margin-block（上下）で、言語ごとの margin ユーティリティの書き換えが不要になるのです。グローバル対応のアプリを作るなら必須になりそうですね。

.mx-6 {
  margin-inline: calc(var(--spacing) * 6);
}

Simplified installation

続いて、インストールがとても簡単になりました。従来は tailwindcss のみならず postcss, autoprefixer をインストールする必要がありましたが、今後は tailwindcss と @tailwindcss/postcss のみをインストールします。

npm i tailwindcss @tailwindcss/postcss;

また、従来は tailwind.config.js と postcss.config.js を色々と設定してましたが、今後は tailwind.config.js の設定は不要で postcss.config.js に PostCSS プラグインを追加するのみです。

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

さらに、従来はメインの CSS に @tailwind ディレクティブを追加してましたが、今後はメインの CSS にこちらを追加するのみです。

@import "tailwindcss";

Vite を使ってたらもっと簡単です。PostCSS プラグインはいらず @tailwindcss/vite というのを vite.config.js に追加するのみです。

import { defineConfig } from "vite";

import tailwindcss from "@tailwindcss/vite";

export default defineConfig({

  plugins: [

    tailwindcss(),

  ],

});

Automatic content detection

続いて、自動コンテンツ検出についてです。従来は tailwind.config.js で content に指定したファイルに対し、tailwindcss のビルドを行ってましたが、今後は自動検出するようになりました。とは言っても全てのファイルを tailwindcss のビルドの対象とすると時間がかかってしまうため、.gitignore のファイルはデフォルトで無視されます。対象にしたいファイルがあったら @source ディレクティブで明示的に追加できます。

CSS-first configuration

続いて、CSS ファーストな構成についてです。従来はカスタムユーティリティ・デザイントークンを tailwind.config.js に追加してましたが、それだと JS で定義してるので CSS で利用するのは難しかったです。それを @theme で CSS 変数として定義することで、CSS からも JS からも簡単にアクセスできるようになりました。

@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 theme variables

続いて、CSS テーマ変数についてです。@theme に定義してるデザイントークンは、ビルド時に :root にカスタムプロパティ（CSS 変数）として追加されます。その為、Tailwind クラス以外でも（手書きの CSS, JS などから）簡単に参照できるようになりました。

: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);
  /* ... */
}

Dynamic utility values and variants

従来 Tailwind CSS は px-*, mt-*, w-*, h-* などの数値が決まってましたが、mt-13 とかはありませんでした。そういうのをデフォルトで対応するようになりました。

Modernized P3 color palette

デフォルトのカラーパレットを rgb から oklch で書き直してるため、とてもきれいになりました。

Container queries

コンテナクエリがコア機能として追加され、@tailwindcss/container-queries が不要になりました。これによって @container クラスで、レスポンシブデザインが簡単に実装できます。さらに @max-* バリアントで最大幅に基づくコンテナクエリもサポートされました。@min-* と @max-* バリアントで、コンテナクエリの範囲を定義できます。

参照

https://tailwindcss.com/