`scrollbar-gutter-*` ユーティリティの追加
Tailwind CSSに scrollbar-gutter-* ユーティリティが追加され、スクロールバーの占有スペースを制御する scrollbar-gutter CSSプロパティをクラスで扱えるようになりました。
背景
scrollbar-gutter プロパティは、スクロールバーが表示・非表示される際のレイアウトシフトを防ぐために設計されたCSSプロパティです。スクロールバーが突然出現するとコンテンツ領域の幅が変化してレイアウトが崩れる問題が知られていますが、scrollbar-gutter を使うことでスクロールバー用の「余白（gutter）」を事前に確保しておき、出現時のズレを回避できます。
今回の追加は、#19981 で導入された scrollbar-width や scrollbar-color に関連するスクロールバー系ユーティリティ群の拡張として位置づけられています。CHANGELOG上でもこれらは _Experimental_ セクションにまとめて記載されており、スクロールバー制御のユーティリティを体系的に整備する動きの一部です。
技術的な変更
staticUtility を使った3つのユーティリティが packages/tailwindcss/src/utilities.ts に追加されました。実装は既存の scrollbar-auto / scrollbar-thin / scrollbar-none と同じパターンに従っており、追加されたユーティリティと生成されるCSSの対応は次のとおりです。
| クラス | 生成されるCSS |
|---|---|
scrollbar-gutter-auto |
scrollbar-gutter: auto |
scrollbar-gutter-stable |
scrollbar-gutter: stable |
scrollbar-gutter-both |
scrollbar-gutter: stable both-edges |
scrollbar-gutter-both は stable both-edges という値に対応しており、スクロール可能な要素の両端（左右または上下）にgutterを確保します。クラス名 both のみの短縮形にすることで、長い値を覚えることなく直感的に使用できます。
staticUtility('scrollbar-gutter-auto', [['scrollbar-gutter', 'auto']])
staticUtility('scrollbar-gutter-stable', [['scrollbar-gutter', 'stable']])
staticUtility('scrollbar-gutter-both', [['scrollbar-gutter', 'stable both-edges']])
あわせて packages/tailwindcss/src/property-order.ts に scrollbar-width・scrollbar-color・scrollbar-gutter の3プロパティが追加されました。これによりスクロールバー関連プロパティがソートの優先順位に組み込まれ、CSS出力時の順序が仕様上の論理的なプロパティ順と整合します。
'scrollbar-width',
'scrollbar-color',
'scrollbar-gutter',
設計判断
scrollbar-gutter-both という命名により、CSS仕様の stable both-edges という複合値をシンプルなクラス名に落とし込んでいます。Tailwindは他のユーティリティでも同様にCSS値を短縮する命名規則を採用しており（例: bg-blend-color-dodge → background-blend-mode: color-dodge）、本変更もその一貫性に沿った判断です。
実装には staticUtility が選ばれており、任意値（arbitrary values）や修飾子（modifiers）を受け付けない設計になっています。テストコードで -scrollbar-gutter-auto や scrollbar-gutter-auto/foo が無効として確認されており、scrollbar-gutter の取りうる値が限定的であることから、静的なユーティリティとして閉じた設計が妥当と判断されたと読み取れます。
まとめ
今回の変更は4行の実装と4行のプロパティ順定義という最小限の追加で scrollbar-gutter の全主要値をカバーするものです。scrollbar-width や scrollbar-color と合わせてスクロールバー制御ユーティリティが揃い、スクロールバー起因のレイアウトシフト対策をTailwindのクラスだけで完結させられるようになりました。