Merge branch 'feat/add-scrollbar-gutter' into fix/add-scrollbar-property-order

Author: RobinMalfait

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Allow using `@variant` with stacked variants (e.g. `@variant hover:focus { … }`) ([#19996](https://github.com/tailwindlabs/tailwindcss/pull/19996))
 - Allow using `@variant` with compound variants (e.g. `@variant hover, focus { … }`) ([#19996](https://github.com/tailwindlabs/tailwindcss/pull/19996))
 - Support `--default(…)` in `--value(…)` and `--modifier(…)` for functional `@utility` definitions ([#19989](https://github.com/tailwindlabs/tailwindcss/pull/19989))
+- Add `scrollbar-gutter-*` utilities ([#20018](https://github.com/tailwindlabs/tailwindcss/pull/20018))
 
 ### Fixed
 

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -11014,6 +11014,9 @@ exports[`getClassList 1`] = `
   "scroll-py-px",
   "scroll-smooth",
   "scrollbar-auto",
+  "scrollbar-gutter-auto",
+  "scrollbar-gutter-both",
+  "scrollbar-gutter-stable",
   "scrollbar-none",
   "scrollbar-thin",
   "scrollbar-thumb-current",

packages/tailwindcss/src/property-order.ts

@@ -133,6 +133,7 @@ export default [
 
   'scrollbar-width',
   'scrollbar-color',
+  'scrollbar-gutter',
 
   'list-style-position',
   'list-style-type',

packages/tailwindcss/src/utilities.test.ts

@@ -11439,6 +11439,36 @@ test('scrollbar-width', async () => {
   ).toEqual('')
 })
 
+test('scrollbar-gutter', async () => {
+  expect(await run(['scrollbar-gutter-auto', 'scrollbar-gutter-stable', 'scrollbar-gutter-both']))
+    .toMatchInlineSnapshot(`
+    "
+    .scrollbar-gutter-auto {
+      scrollbar-gutter: auto;
+    }
+
+    .scrollbar-gutter-both {
+      scrollbar-gutter: stable both-edges;
+    }
+
+    .scrollbar-gutter-stable {
+      scrollbar-gutter: stable;
+    }
+    "
+  `)
+  expect(
+    await run([
+      'scrollbar-gutter',
+      '-scrollbar-gutter-auto',
+      '-scrollbar-gutter-stable',
+      '-scrollbar-gutter-both',
+      'scrollbar-gutter-auto/foo',
+      'scrollbar-gutter-stable/foo',
+      'scrollbar-gutter-both/foo',
+    ]),
+  ).toEqual('')
+})
+
 test('scrollbar-thumb', async () => {
   expect(
     await compileCss(

packages/tailwindcss/src/utilities.ts

@@ -2218,6 +2218,10 @@ export function createUtilities(theme: Theme) {
     staticUtility('scrollbar-thin', [['scrollbar-width', 'thin']])
     staticUtility('scrollbar-none', [['scrollbar-width', 'none']])
 
+    staticUtility('scrollbar-gutter-auto', [['scrollbar-gutter', 'auto']])
+    staticUtility('scrollbar-gutter-stable', [['scrollbar-gutter', 'stable']])
+    staticUtility('scrollbar-gutter-both', [['scrollbar-gutter', 'stable both-edges']])
+
     {
       let scrollbarColorProperties = () => {
         return atRoot([