Tailwind CSS 4.3.0 リリース：スクロールバー・ズーム・タブ関連ユーティリティが正式追加

2026年05月09日 05:03 JST tailwindlabs/tailwindcss

https://github.com/tailwindlabs/tailwindcss/pull/20023

Tailwind CSS 4.3.0 では、実験的フラグのもとで提供されていたスクロールバー系ユーティリティが正式機能へ昇格し、zoom-*・tab-*・@container-size などの新ユーティリティが追加された。あわせて、Canonicalizationとアップグレードツールの複数バグが修正されている。

背景

本リリースの中心的な変化は、実験的機能の安定化だ。packages/tailwindcss/src/feature-flags.ts にあった enableContainerSizeUtility と enableScrollbarUtilities の2フラグが削除され、これらの機能が無条件で有効になった。フラグの存在は process.env.FEATURES_ENV !== 'stable' という環境変数による制御で実現されていたが、4.3.0 ではこの仕組みごと廃止されている。

実験段階では --scrollbar-thumb-color および --scrollbar-track-color という専用のテーマキーが参照されていた。正式化にあたってこれらのカスタムキーは削除され、共通の --color テーマキーのみを参照する設計に統一された。これにより、スクロールバーカラーが既存のカラーパレット定義とシームレスに連携する。

技術的な変更

フィーチャーフラグの廃止とユーティリティの無条件有効化

feature-flags.ts ファイルが丸ごと削除され、utilities.ts 内の条件分岐も除去された。

変更前:

import { enableContainerSizeUtility, enableScrollbarUtilities } from './feature-flags'

if (enableScrollbarUtilities) {
  staticUtility('scrollbar-auto', [['scrollbar-width', 'auto']])
  // ...
  colorUtility('scrollbar-thumb', {
    themeKeys: ['--scrollbar-thumb-color', '--color'],
    // ...
  })
}

変更後:

staticUtility('scrollbar-auto', [['scrollbar-width', 'auto']])
staticUtility('scrollbar-thin', [['scrollbar-width', 'thin']])
staticUtility('scrollbar-none', [['scrollbar-width', 'none']])

colorUtility('scrollbar-thumb', {
  themeKeys: ['--color'],
  handle: (value) => [
    scrollbarColorProperties(),
    decl('--tw-scrollbar-thumb', value),
    decl('scrollbar-color', 'var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)'),
  ],
})

フラグ制御の撤廃により、--scrollbar-thumb-color-blue-500 のようなカスタムテーマキーを定義して色を上書きする手法は機能しなくなる。既存のカラーテーマ（--color-*）をそのまま利用するかたちに統一されている。

新規ユーティリティの追加

4.3.0 では以下のユーティリティが新たに追加された:

@container-size: コンテナクエリのサイズ指定ユーティリティ（#18901）
scrollbar-{auto,thin,none}: scrollbar-width プロパティ対応（#19981）
scrollbar-thumb-* / scrollbar-track-*: scrollbar-color の thumb・track 色指定（#20019）
scrollbar-gutter-*: scrollbar-gutter プロパティ対応（#20018）
zoom-*: CSS zoom プロパティ対応（#20020）
tab-*: タブサイズ関連ユーティリティ（#20022）

`@variant` の拡張

@variant ディレクティブがスタック形式および複合形式のバリアントに対応した（#19996）。

/* スタックバリアント */
@variant hover:focus {
  /* hover かつ focus の状態に適用 */
}

/* 複合バリアント */
@variant hover, focus {
  /* hover または focus の状態に適用 */
}

Canonicalization のバグ修正

Canonicalization（クラス名の正規化処理）で複数のバグが修正された（#19986、#19988）。

空白除去によって可読性が損なわれるケースで括弧を補完するようになった（例: w-[calc(100%---spacing(60))] → w-[calc(100%-(--spacing(60)))]）
任意値のユニットをベース単位へ正規化しなくなった（例: -mt-[20in] → mt-[-20in]、従来は mt-[-1920px] に変換されていた）
任意値の :has() バリアントが [&:has(…)] から has-[…] 形式へ自動マイグレーションされるようになった（#19991）

アップグレードツールの修正

アップグレードツールがインライン style 属性を誤って変換する問題が修正された（#19918）。たとえば style="flex-grow: 1" が style="grow: 1" に書き換えられてしまう誤変換が防がれる。

テストのファイルハッシュ正規表現修正

integrations/vite/resolvers.test.ts では、CSSファイルのハッシュ部分を置換する正規表現が -([a-zA-Z0-9]*?)\.css から -([_a-zA-Z0-9]*?)\.css へ修正された。アンダースコア（_）を含むファイルハッシュに対応するための変更で、Vite のビルド出力ファイル名の形式変化に追従したものと見られる。

設計判断

フィーチャーフラグを設けて段階的に機能を公開し、安定と判断した時点でフラグを撤廃して無条件化するというアプローチが採られている。この PR では feature-flags.ts ファイルそのものの削除というかたちでその完了が表現されており、ファイルに残骸を残さない明快な処理が行われている。

スクロールバーカラーのテーマキーを --scrollbar-thumb-color から --color に統一した判断は、専用のカスタムテーマキーを増やさずにカラーパレットの一元管理を維持する設計思想と一致する。実験段階で独自テーマキーを定義していたユーザーには破壊的変更となるが、既存の --color-* パレットがそのまま利用できるため、実用上の影響は限定的といえる。

@utility の --default(…) 対応（#19989）や同名ユーティリティの複数定義許容（#19777）といった修正も含まれており、カスタムユーティリティ定義の柔軟性向上が継続的に進められていることがわかる。

まとめ

4.3.0 は実験的機能の正式化とユーティリティの拡充を軸としたリリースで、スクロールバー制御に関する CSS 標準プロパティへのカバレッジが大きく向上した。フィーチャーフラグの廃止という明確な区切りを持つリリース設計は、段階的な機能公開と安定性確保を両立する Tailwind CSS の開発スタイルをよく表している。

背景