Tailwind CSS v4.0 が正式リリース。高速化、CSS ファイル内での設定など大幅進化

Tailwind CSS の最新バージョンである v4.0 が正式リリースになりました。公式 Blog のリリース内容から、個人的に気になった変更点を簡単に挙げてみようと思います。

少し時間空いてしまって先週の話ですけども、Tailwind CSS の最新バージョンである v4.0 が正式リリースになりました。昨年の 11 月頃に Beta 1 がリリースされてから意識はしていましたけども、そこから約 2ヶ月をかけてついに正式リリースです。

v4.0 の詳しい内容は公式 Blog で書かれていますが、個人的に気になった変更点を簡単に挙げてみようと思います。

Tailwind CSS のようなユーティリティクラスを組み合わせて実装していくアプローチは、可読性やらメンテナンス性、あるいは私も基本的にはそうですが、class 名についても意味論 (セマンティクス) を重視すべきという考え方からするとネガティブな印象を持たれがちですし、実は私もはじめて Tailwind CSS で実装されたコードを見たときには正直ないわ、と思いました。

しかしその後、試しに Tailwind CSS v1~ v2 をプロトタイプの作成や個人的な Web サイトで使ってみたりしながら徐々にその利便性に気づき、2022 年の前半くらいだったと思いますが、実際のクライアント案件に本格的に導入 (この時点で Tailwind CSS は v3 になってた) したのをきっかけに、その後は要件的に Tailwind CSS が適していそうなものに関しては積極的に利用しています。

この Blog もそうですし、自社の Web サイトなど、自分の裁量 100% でやれる Web サイトや Web アプリケーションの構築では、もはや使わないことがないくらいなので、今となっては手放せない状態ですが、v3 を使っている時間が長かったので今回の v4 は久々のメジャーアップデート。

Beta リリースをたまに見ていたので予想はしていましたが、既存プロジェクト、特に JavaScript フレームワークなんかと組み合わせた大きめのプロジェクトだとバージョンアップは結構大変そうな印象なのでしばらくは v3.4.17 で運用しつつ考えよって感じになりそうです。

なお、v3 から v4 へのアップデートについて、ほとんどのプロジェクトでは、下記の npx コマンド一発で、依存関係の更新、設定ファイルの CSS への移行、テンプレートファイルの変更処理など含めて、アップグレードツールがうまいことやってくれるらしいです (私は試してないけれど)。

npx @tailwindcss/upgrade@next

新しいブランチ切ってこいつを一発試してみるというのもありかもしれません。ちなみにアップグレードツールの実行には Node.js v20 以上が必要。

Tailwind CSS v4.0 での変更点

冒頭にも書いたとおり、公式 Blog にまとまっているのでそれを読んでいただくのが確実ですが、以下に特に私が気になったポイントだけ挙げておきます。

CSS-first configuration - JavaScript による設定ファイルからの脱却

Tailwind CSS v4.0 の恐らく最も大きい変更点はこれだと思います。従来のバージョンでは、tailwind.config.js という JavaScript ベースの設定ファイルに設定を記述していましたが、v4 では、Tailwind CSS をインポートする CSS ファイル内で @theme を使用することで、直接的にすべてのカスタマイズを設定することができるようになっています。

つまり、v4 では tailwind.config.js は不要ということです。

例えば、v3 で Web フォントを使用する場合など、例えば下記のように tailwind.config.js ファイル内で class 名 (この例だと font-body) を定義して使用していましたけども、

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {
      fontFamily: {
        'body': ['"Noto Sans JP Variable"', 'sans-serif'],
      },
    },
  },
  plugins: [...],
}

v4 では、CSS 内に下記のように @theme を書けばよいと言うことで、CSS に慣れている人にとってはとても直感的な記述が可能になりました。個人的にもこちらの方がよい。

@import "tailwindcss";
@theme {
  --font-body: "Noto Sans JP Variable", sans-serif;
}

また、例えば下記のように設定することで、bg-mint-500text-mint-500、あるいは fill-mint-500 のように各ユーティリティクラスに新しい色を追加することができます。

@import "tailwindcss";
@theme {
  --color-mint-500: oklch(0.72 0.11 178);
}

ちなみに、追加プラグインの読み込みは @plugin で書けばよい。

@import "tailwindcss";
@plugin "@tailwindcss/typography";

あと一応、tailwind.config.js ファイルを引き続き使いたい場合は下記のように読み込んで使用することもできます。

@import "tailwindcss";
@config "../../tailwind.config.js";

First-party Vite plugin - 公式の Vite プラグイン

Tailwind CSS v4.0 では、公式の Vite プラグインが導入されました。@tailwindcss/vite によって Tailwind CSS を開発環境に統合することができます。

vite.config.ts の設定例としては下記のような感じ。

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
});

Automatic content detection - コンテンツの自動検出

v3 までの Tailwind CSS では、処理対象となるコンテンツを指定するため、tailwind.config.js 内で content: ['./src/**/*.{html,js}'], のような設定を記述する必要がありましたが、v4 ではこれが不要になっています。

Tailwind CSS v4 は、.gitignore に記述されているファイルやディレクトリは自動的に無視、さらに画像や動画、.zip ファイルなど、CSS のビルドに関係しないファイルも自動的に無視した上で処理をしてくれます。

もし、デフォルトでは無視されるリソースを明示的に処理対象に追加したい場合は、CSS ファイル内 で @source ディレクティブを記述して追加可能です。

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib";

Built-in import support - 組み込みの @import サポート

v3 までは、外部 CSS のインポートに PostCSS が必要でしたけども、v4 では標準でサポートしたため、単純に CSS ファイル内で @import を書けばよくなりました。

Dynamic utility values and variants - 動的な値やバリアントの受け入れ

v3 までは、例えば grid-cols-* ユーティリティクラスを使用する場合、あらかじめ定義されたもの (grid-cols-4 など) 以外を使用したければ、設定ファイルで定義しないといけませんでした。要するに v3 では独自定義なしに grid-cols-15 などと書いても意味がなかったわけです。

v4 では一部のユーティリティクラスが、動的、かつ柔軟に値を受け入れるようになっていますので、いきなり grid-cols-15 と書いても、きちんと grid-template-columns: repeat(15, minmax(0, 1fr)); と解釈されるのでかなり便利。

一方で開発者が好き放題に使いまくると、ばらっばらなユーティリティクラスが乱発される可能性もありますので注意も必要そう。

その他、px-*mt-*w-*h-* なども同様なので、例えば、w-17 と書けば、width: calc(var(--spacing) * 17); と解釈されます。デフォルトの定義が --spacing: 0.25rem; なので、計算しやすいですね。

Modernized P3 color palette - Display P3 に対応したカラーパレット

カラーパレットが、rgb() ではなく、oklch() 関数で定義されるようになりました。この辺は、最近のブラウザサポート状況を踏まえてでしょう。

Oklch 色空間は、sRGB 色空間に比べ、広い範囲で正確な色を再現できるだけでなく、人間の視覚にとってより自然な色の再現や、彩度、色相の調整がしやすいといったメリットがありますので、現在の開発においてはマストな選択ですし、Tailwind CSS でも標準的に使用できるようになるのは朗報です。

Container queries - コンテナクエリの標準サポート

v3 でも @tailwindcss/container-queries プラグインを導入することで使用することができたコンテナクエリ (@container) ですが、標準機能として取り込まれましたので、v4 ではプラグイン不要で使用できます。

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

Expanded gradient APIs - グラデーション関連の進化

v4 ではグラデーション関係がかなり強化されています。bg-gradient-*bg-linear-* にリプレースされ、角度の値も受け入れるようになったため、下記のような記述で、角度が 45 度のグラデーションを作るようなことも可能に。

<div class="bg-linear-45 from-indigo-500 via-purple-500 to-pink-500"></div>

また、新たに bg-conic-*bg-radial-* ユーティリティクラスが追加され、扇型グラデーション (conic-gradient()) や、円形グラデーション (radial-gradient()) にも対応しています。

@starting-style support - @starting-style のサポート

@starting-style 規則は、CSS トランジションさせる要素に設定されるプロパティ群の変更前スタイルを定義するために使用されますが、starting: バリアントを使用することで、Tailwind CSS でもこの機能が使用可能になりました。

@starting-style 規則について簡単に説明しておきますと、まず、CSS トランジションは、通常「スタイルが変更されたとき」に開始されます。この時、要素には「変更前スタイル(before-change style)」が必要です。

この「変更前スタイル」は、前回のスタイル変更時に設定されている必要がありますが、例えば、(display: none; などによって)要素が画面に表示されていなかった場合、その要素には前回のスタイル変更イベントで「変更前スタイル」が存在しないため、通常は CSS トランジションが開始できません(動作が発火、トリガーされません)。

しかし、新しく DOM に追加された要素や、display: none; から別の値に変更されることによって表示されるようになった要素に対しても CSS トランジションを開始したいケースは多いと思います。このようなニーズに @starting-style 規則は対応します。つまり、@starting-style 規則によって「変更前スタイル」を定義することにより、CSS トランジションを動作させることが可能になります。

ちなみにブラウザサポートの足並みはほぼ揃っていますが、Firefox だけ、まだ完全なサポートがされていません

not-* variant - :not() 疑似クラスのサポート

気がつけば、ほぼすべての項目について書いている気がしますがまぁいいか。

v4 では、:not() 疑似クラスについても、not-* バリアントを使用することで対応します。

使用例は下記のような感じですね。

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

ということで、つらつらとまとめてみましたが長かった。

その他にも、shadow-smshadow-xsshadowshadow-sm のようなユーティリティクラス名の変更など、細かい変更もあります。この辺は冒頭でもリンクを張っている、Upgrade guide などを確認してください。

おまけ: Astro.js で Tailwind CSS v4 を使用する場合

まだ試してないんですけども、この記事を書いている時点で、@astrojs/tailwind は Tailwind CSS v4 に対応していないと思いますので、Astro.js 利用環境で Tailwind CSS v4 にアップグレードする場合は、一度 Tailwind CSS、および @astrojs/tailwind を削除後、

npm install tailwindcss @tailwindcss/vite

を実行してアップグレードと、必要なモジュールをインストールしてから、astro.config.mjs に下記を追記。

import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite'; // ←追記

// https://astro.build/config
export default defineConfig({
  vite: {
    plugins: [tailwindcss()], // ←追記
  }
});

何かしら CSS ファイル (例えば、src/styles/styles.css) を作って中身を下記のようにして、

@import "tailwindcss";

src/layouts/Layout.astro で読み込んであれげばいいんじゃないかなと思います。

import "../styles/styles.css";

関連記事

完全に宣伝ですけども、本記事でも出てきた、oklch() 関数、@starting-style 規則、コンテナクエリや、グラデーション関連 (conic-gradient() 関数、radial-gradient() 関数) などについても、先月発売した下記の著書内できちんと解説していますのでご興味があればどうぞ。

この Blog も Tailwind CSS を使用していますが、本サイトで Tailwind CSS を v3 から v4 にアップグレードした際の手順を簡単にまとめておきました。

記事をここまで御覧頂きありがとうございます。
この記事が気に入ったらサポートしてみませんか?