スクロールバーのスタイリングユーティリティが実験的機能として追加

2026年05月05日 00:16 JST tailwindlabs/tailwindcss

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

scrollbar-width と scrollbar-color CSS プロパティに対応するユーティリティクラスが、実験的機能として Tailwind CSS に追加されました。スクロールバーの太さと色をユーティリティクラスで宣言的に制御できるようになります。

背景

ネイティブ CSS の scrollbar-width と scrollbar-color プロパティは、ブラウザ標準のスクロールバーをカスタマイズするための仕様です。これまで Tailwind CSS にはこれらに対応するユーティリティが存在せず、スクロールバーのスタイリングには任意のカスタム CSS を別途記述する必要がありました。

本 PR はこの空白を埋めるもので、@container-size ユーティリティと同様に FEATURES_ENV 環境変数による実験的フラグの下で提供されます。安定版への昇格前に実運用でのフィードバックを収集する段階として位置づけられています。

技術的な変更

今回の変更は scrollbar-width 向けの静的ユーティリティと、scrollbar-color 向けのカラーユーティリティの2系統で構成されています。

scrollbar-width の静的ユーティリティは CSS 仕様のキーワードに1対1で対応する3クラスです：

クラス	生成される CSS
`scrollbar-auto`	`scrollbar-width: auto;`
`scrollbar-thin`	`scrollbar-width: thin;`
`scrollbar-none`	`scrollbar-width: none;`

scrollbar-color のカラーユーティリティは、scrollbar-thumb-<color> と scrollbar-track-<color> の2系統です。scrollbar-color プロパティはサム（つまみ）とトラック（溝）の2色を1つのプロパティで指定する仕様のため、片方だけを独立して設定できるよう --tw-scrollbar-thumb と --tw-scrollbar-track の CSS 変数ペアを経由する設計が採用されています：

/* scrollbar-thumb-red-500 が生成するCSS */
@property --tw-scrollbar-thumb { ... }
@property --tw-scrollbar-track { ... }

.scrollbar-thumb-red-500 {
  --tw-scrollbar-thumb: #ef4444;
  scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
}

実装は packages/tailwindcss/src/utilities.ts 内の colorUtility 関数を使用しており、標準カラーパレット、テーマキー（--scrollbar-thumb-color / --scrollbar-track-color、フォールバックとして --color）、任意値、/<alpha> 不透明度修飾子が自動的にサポートされます。また、CSS 変数は @property で初期値 #0000（透明）として登録されており、片方の変数が未設定の場合は透明にフォールバックします。

<div class="scrollbar-thin scrollbar-thumb-red-500 scrollbar-track-zinc-200">…</div>

フラグ制御は packages/tailwindcss/src/feature-flags.ts に enableScrollbarUtilities を追加し、utilities.ts でこのフラグを参照する形で行われています：

export const enableContainerSizeUtility = process.env.FEATURES_ENV !== 'stable'
export const enableScrollbarUtilities = process.env.FEATURES_ENV !== 'stable'

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

  // scrollbar-color utilities...
}

設計判断

CSS 変数ペアによる独立設定パターンは、グラデーションストップユーティリティ（from-* / via-* / to-*）と同じアプローチです。scrollbar-color が2つの色を同時に要求する CSS プロパティであるにもかかわらず、scrollbar-thumb-* と scrollbar-track-* を個別のクラスとして設定できるのは、この変数ペアの仕組みによるものです。変数の初期値を #0000（透明）にしておくことで、一方だけ指定した場合も scrollbar-color プロパティとして有効なCSS が常に出力されます。

colorUtility 関数への統合により、カラーパレットや任意値、不透明度修飾子の対応が既存インフラをそのまま活用できます。新たなユーティリティでありながら、Tailwind の標準的なカラー指定体験と一貫性を保っています。

まとめ

本 PR はグラデーションストップと同じ CSS 変数ペアのパターンを scrollbar-color に適用することで、プロパティの仕様制約を乗り越えつつ既存のユーティリティ設計との一貫性を維持した変更です。実験的フラグによる段階的提供により、安定版への昇格前に実運用環境でのフィードバックを得る余地が設けられています。