From 8d7ee2ef8d8fb2d6c8648e80d70b76d79601f113 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 25 Apr 2026 20:33:07 +0000 Subject: [PATCH 1/5] Add scrollbar-width and scrollbar-color utilities Adds new utilities for the `scrollbar-width` and `scrollbar-color` CSS properties: - `scrollbar-auto`, `scrollbar-thin`, `scrollbar-none` for `scrollbar-width` - `scrollbar-thumb-*` and `scrollbar-track-*` color utilities, which compose via the `--tw-scrollbar-thumb` / `--tw-scrollbar-track` CSS variables so the thumb and track colors can be set independently while emitting a single `scrollbar-color` declaration. --- CHANGELOG.md | 1 + .../__snapshots__/intellisense.test.ts.snap | 135 +++++++++ packages/tailwindcss/src/utilities.test.ts | 274 ++++++++++++++++++ packages/tailwindcss/src/utilities.ts | 31 ++ 4 files changed, 441 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 08a0a8282f1b..641fe1a5c17c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,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-{auto,thin,none}` utilities for `scrollbar-width`, and `scrollbar-thumb-*` / `scrollbar-track-*` color utilities for `scrollbar-color` ### Fixed diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 3bf7905409b2..736bac1be8d0 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -11013,6 +11013,141 @@ exports[`getClassList 1`] = ` "scroll-py-96", "scroll-py-px", "scroll-smooth", + "scrollbar-auto", + "scrollbar-none", + "scrollbar-thin", + "scrollbar-thumb-current", + "scrollbar-thumb-current/0", + "scrollbar-thumb-current/5", + "scrollbar-thumb-current/10", + "scrollbar-thumb-current/15", + "scrollbar-thumb-current/20", + "scrollbar-thumb-current/25", + "scrollbar-thumb-current/30", + "scrollbar-thumb-current/35", + "scrollbar-thumb-current/40", + "scrollbar-thumb-current/45", + "scrollbar-thumb-current/50", + "scrollbar-thumb-current/55", + "scrollbar-thumb-current/60", + "scrollbar-thumb-current/65", + "scrollbar-thumb-current/70", + "scrollbar-thumb-current/75", + "scrollbar-thumb-current/80", + "scrollbar-thumb-current/85", + "scrollbar-thumb-current/90", + "scrollbar-thumb-current/95", + "scrollbar-thumb-current/100", + "scrollbar-thumb-inherit", + "scrollbar-thumb-inherit/0", + "scrollbar-thumb-inherit/5", + "scrollbar-thumb-inherit/10", + "scrollbar-thumb-inherit/15", + "scrollbar-thumb-inherit/20", + "scrollbar-thumb-inherit/25", + "scrollbar-thumb-inherit/30", + "scrollbar-thumb-inherit/35", + "scrollbar-thumb-inherit/40", + "scrollbar-thumb-inherit/45", + "scrollbar-thumb-inherit/50", + "scrollbar-thumb-inherit/55", + "scrollbar-thumb-inherit/60", + "scrollbar-thumb-inherit/65", + "scrollbar-thumb-inherit/70", + "scrollbar-thumb-inherit/75", + "scrollbar-thumb-inherit/80", + "scrollbar-thumb-inherit/85", + "scrollbar-thumb-inherit/90", + "scrollbar-thumb-inherit/95", + "scrollbar-thumb-inherit/100", + "scrollbar-thumb-transparent", + "scrollbar-thumb-transparent/0", + "scrollbar-thumb-transparent/5", + "scrollbar-thumb-transparent/10", + "scrollbar-thumb-transparent/15", + "scrollbar-thumb-transparent/20", + "scrollbar-thumb-transparent/25", + "scrollbar-thumb-transparent/30", + "scrollbar-thumb-transparent/35", + "scrollbar-thumb-transparent/40", + "scrollbar-thumb-transparent/45", + "scrollbar-thumb-transparent/50", + "scrollbar-thumb-transparent/55", + "scrollbar-thumb-transparent/60", + "scrollbar-thumb-transparent/65", + "scrollbar-thumb-transparent/70", + "scrollbar-thumb-transparent/75", + "scrollbar-thumb-transparent/80", + "scrollbar-thumb-transparent/85", + "scrollbar-thumb-transparent/90", + "scrollbar-thumb-transparent/95", + "scrollbar-thumb-transparent/100", + "scrollbar-track-current", + "scrollbar-track-current/0", + "scrollbar-track-current/5", + "scrollbar-track-current/10", + "scrollbar-track-current/15", + "scrollbar-track-current/20", + "scrollbar-track-current/25", + "scrollbar-track-current/30", + "scrollbar-track-current/35", + "scrollbar-track-current/40", + "scrollbar-track-current/45", + "scrollbar-track-current/50", + "scrollbar-track-current/55", + "scrollbar-track-current/60", + "scrollbar-track-current/65", + "scrollbar-track-current/70", + "scrollbar-track-current/75", + "scrollbar-track-current/80", + "scrollbar-track-current/85", + "scrollbar-track-current/90", + "scrollbar-track-current/95", + "scrollbar-track-current/100", + "scrollbar-track-inherit", + "scrollbar-track-inherit/0", + "scrollbar-track-inherit/5", + "scrollbar-track-inherit/10", + "scrollbar-track-inherit/15", + "scrollbar-track-inherit/20", + "scrollbar-track-inherit/25", + "scrollbar-track-inherit/30", + "scrollbar-track-inherit/35", + "scrollbar-track-inherit/40", + "scrollbar-track-inherit/45", + "scrollbar-track-inherit/50", + "scrollbar-track-inherit/55", + "scrollbar-track-inherit/60", + "scrollbar-track-inherit/65", + "scrollbar-track-inherit/70", + "scrollbar-track-inherit/75", + "scrollbar-track-inherit/80", + "scrollbar-track-inherit/85", + "scrollbar-track-inherit/90", + "scrollbar-track-inherit/95", + "scrollbar-track-inherit/100", + "scrollbar-track-transparent", + "scrollbar-track-transparent/0", + "scrollbar-track-transparent/5", + "scrollbar-track-transparent/10", + "scrollbar-track-transparent/15", + "scrollbar-track-transparent/20", + "scrollbar-track-transparent/25", + "scrollbar-track-transparent/30", + "scrollbar-track-transparent/35", + "scrollbar-track-transparent/40", + "scrollbar-track-transparent/45", + "scrollbar-track-transparent/50", + "scrollbar-track-transparent/55", + "scrollbar-track-transparent/60", + "scrollbar-track-transparent/65", + "scrollbar-track-transparent/70", + "scrollbar-track-transparent/75", + "scrollbar-track-transparent/80", + "scrollbar-track-transparent/85", + "scrollbar-track-transparent/90", + "scrollbar-track-transparent/95", + "scrollbar-track-transparent/100", "select-all", "select-auto", "select-none", diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 7046663b94e0..7b69bcc30894 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -11011,6 +11011,280 @@ test('scroll-behavior', async () => { ).toEqual('') }) +test('scrollbar-width', async () => { + expect(await run(['scrollbar-auto', 'scrollbar-thin', 'scrollbar-none'])) + .toMatchInlineSnapshot(` + ".scrollbar-auto { + scrollbar-width: auto; + } + + .scrollbar-none { + scrollbar-width: none; + } + + .scrollbar-thin { + scrollbar-width: thin; + }" + `) + expect( + await run([ + 'scrollbar', + '-scrollbar-auto', + '-scrollbar-thin', + '-scrollbar-none', + 'scrollbar-auto/foo', + 'scrollbar-thin/foo', + 'scrollbar-none/foo', + ]), + ).toEqual('') +}) + +test('scrollbar-thumb', async () => { + expect( + await compileCss( + css` + @theme { + --color-red-500: #ef4444; + --scrollbar-thumb-color-blue-500: #3b82f6; + } + @tailwind utilities; + `, + [ + 'scrollbar-thumb-red-500', + 'scrollbar-thumb-red-500/50', + 'scrollbar-thumb-red-500/[0.5]', + 'scrollbar-thumb-blue-500', + 'scrollbar-thumb-current', + 'scrollbar-thumb-inherit', + 'scrollbar-thumb-transparent', + 'scrollbar-thumb-[#0088cc]', + 'scrollbar-thumb-[#0088cc]/50', + ], + ), + ).toMatchInlineSnapshot(` + "@layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-scrollbar-thumb: #0000; + --tw-scrollbar-track: #0000; + } + } + } + + :root, :host { + --color-red-500: #ef4444; + --scrollbar-thumb-color-blue-500: #3b82f6; + } + + .scrollbar-thumb-\\[\\#0088cc\\] { + --tw-scrollbar-thumb: #08c; + scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); + } + + .scrollbar-thumb-\\[\\#0088cc\\]\\/50 { + --tw-scrollbar-thumb: oklab(59.9824% -.067 -.124 / .5); + scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); + } + + .scrollbar-thumb-blue-500 { + --tw-scrollbar-thumb: var(--scrollbar-thumb-color-blue-500); + scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); + } + + .scrollbar-thumb-current { + --tw-scrollbar-thumb: currentcolor; + scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); + } + + .scrollbar-thumb-inherit { + --tw-scrollbar-thumb: inherit; + scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); + } + + .scrollbar-thumb-red-500 { + --tw-scrollbar-thumb: var(--color-red-500); + scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); + } + + .scrollbar-thumb-red-500\\/50 { + --tw-scrollbar-thumb: #ef444480; + } + + @supports (color: color-mix(in lab, red, red)) { + .scrollbar-thumb-red-500\\/50 { + --tw-scrollbar-thumb: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } + } + + .scrollbar-thumb-red-500\\/50 { + scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); + } + + .scrollbar-thumb-red-500\\/\\[0\\.5\\] { + --tw-scrollbar-thumb: #ef444480; + } + + @supports (color: color-mix(in lab, red, red)) { + .scrollbar-thumb-red-500\\/\\[0\\.5\\] { + --tw-scrollbar-thumb: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } + } + + .scrollbar-thumb-red-500\\/\\[0\\.5\\] { + scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); + } + + .scrollbar-thumb-transparent { + --tw-scrollbar-thumb: transparent; + scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); + } + + @property --tw-scrollbar-thumb { + syntax: ""; + inherits: false; + initial-value: #0000; + } + + @property --tw-scrollbar-track { + syntax: ""; + inherits: false; + initial-value: #0000; + }" + `) + expect( + await run([ + 'scrollbar-thumb', + '-scrollbar-thumb-red-500', + '-scrollbar-thumb-red-500/50', + 'scrollbar-thumb-red-500/foo', + 'scrollbar-thumb-[#0088cc]/foo', + ]), + ).toEqual('') +}) + +test('scrollbar-track', async () => { + expect( + await compileCss( + css` + @theme { + --color-red-500: #ef4444; + --scrollbar-track-color-blue-500: #3b82f6; + } + @tailwind utilities; + `, + [ + 'scrollbar-track-red-500', + 'scrollbar-track-red-500/50', + 'scrollbar-track-red-500/[0.5]', + 'scrollbar-track-blue-500', + 'scrollbar-track-current', + 'scrollbar-track-inherit', + 'scrollbar-track-transparent', + 'scrollbar-track-[#0088cc]', + 'scrollbar-track-[#0088cc]/50', + ], + ), + ).toMatchInlineSnapshot(` + "@layer properties { + @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { + *, :before, :after, ::backdrop { + --tw-scrollbar-thumb: #0000; + --tw-scrollbar-track: #0000; + } + } + } + + :root, :host { + --color-red-500: #ef4444; + --scrollbar-track-color-blue-500: #3b82f6; + } + + .scrollbar-track-\\[\\#0088cc\\] { + --tw-scrollbar-track: #08c; + scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); + } + + .scrollbar-track-\\[\\#0088cc\\]\\/50 { + --tw-scrollbar-track: oklab(59.9824% -.067 -.124 / .5); + scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); + } + + .scrollbar-track-blue-500 { + --tw-scrollbar-track: var(--scrollbar-track-color-blue-500); + scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); + } + + .scrollbar-track-current { + --tw-scrollbar-track: currentcolor; + scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); + } + + .scrollbar-track-inherit { + --tw-scrollbar-track: inherit; + scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); + } + + .scrollbar-track-red-500 { + --tw-scrollbar-track: var(--color-red-500); + scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); + } + + .scrollbar-track-red-500\\/50 { + --tw-scrollbar-track: #ef444480; + } + + @supports (color: color-mix(in lab, red, red)) { + .scrollbar-track-red-500\\/50 { + --tw-scrollbar-track: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } + } + + .scrollbar-track-red-500\\/50 { + scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); + } + + .scrollbar-track-red-500\\/\\[0\\.5\\] { + --tw-scrollbar-track: #ef444480; + } + + @supports (color: color-mix(in lab, red, red)) { + .scrollbar-track-red-500\\/\\[0\\.5\\] { + --tw-scrollbar-track: color-mix(in oklab, var(--color-red-500) 50%, transparent); + } + } + + .scrollbar-track-red-500\\/\\[0\\.5\\] { + scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); + } + + .scrollbar-track-transparent { + --tw-scrollbar-track: transparent; + scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); + } + + @property --tw-scrollbar-thumb { + syntax: ""; + inherits: false; + initial-value: #0000; + } + + @property --tw-scrollbar-track { + syntax: ""; + inherits: false; + initial-value: #0000; + }" + `) + expect( + await run([ + 'scrollbar-track', + '-scrollbar-track-red-500', + '-scrollbar-track-red-500/50', + 'scrollbar-track-red-500/foo', + 'scrollbar-track-[#0088cc]/foo', + ]), + ).toEqual('') +}) + test('truncate', async () => { expect(await run(['truncate'])).toMatchInlineSnapshot(` ".truncate { diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index d5389631acb0..9f36de78252a 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -2209,6 +2209,37 @@ export function createUtilities(theme: Theme) { staticUtility('scroll-auto', [['scroll-behavior', 'auto']]) staticUtility('scroll-smooth', [['scroll-behavior', 'smooth']]) + staticUtility('scrollbar-auto', [['scrollbar-width', 'auto']]) + staticUtility('scrollbar-thin', [['scrollbar-width', 'thin']]) + staticUtility('scrollbar-none', [['scrollbar-width', 'none']]) + + { + let scrollbarColorProperties = () => { + return atRoot([ + property('--tw-scrollbar-thumb', '#0000', ''), + property('--tw-scrollbar-track', '#0000', ''), + ]) + } + + colorUtility('scrollbar-thumb', { + themeKeys: ['--scrollbar-thumb-color', '--color'], + handle: (value) => [ + scrollbarColorProperties(), + decl('--tw-scrollbar-thumb', value), + decl('scrollbar-color', 'var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)'), + ], + }) + + colorUtility('scrollbar-track', { + themeKeys: ['--scrollbar-track-color', '--color'], + handle: (value) => [ + scrollbarColorProperties(), + decl('--tw-scrollbar-track', value), + decl('scrollbar-color', 'var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)'), + ], + }) + } + staticUtility('truncate', [ ['overflow', 'hidden'], ['text-overflow', 'ellipsis'], From 9c86a5ac746eb195652de5a37690f5499e4185cd Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 28 Apr 2026 15:27:17 +0200 Subject: [PATCH 2/5] format --- packages/tailwindcss/src/utilities.test.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 7b69bcc30894..219302ae3f71 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -11012,8 +11012,7 @@ test('scroll-behavior', async () => { }) test('scrollbar-width', async () => { - expect(await run(['scrollbar-auto', 'scrollbar-thin', 'scrollbar-none'])) - .toMatchInlineSnapshot(` + expect(await run(['scrollbar-auto', 'scrollbar-thin', 'scrollbar-none'])).toMatchInlineSnapshot(` ".scrollbar-auto { scrollbar-width: auto; } From bbdaa6983a018f8af2e3e1c4af2b4d2451a4c51a Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 28 Apr 2026 15:27:39 +0200 Subject: [PATCH 3/5] wrap new scrollbar utilities in feature flag --- packages/tailwindcss/src/feature-flags.ts | 1 + packages/tailwindcss/src/utilities.ts | 56 ++++++++++++----------- 2 files changed, 30 insertions(+), 27 deletions(-) diff --git a/packages/tailwindcss/src/feature-flags.ts b/packages/tailwindcss/src/feature-flags.ts index 5a262056c78c..2441c03d81e9 100644 --- a/packages/tailwindcss/src/feature-flags.ts +++ b/packages/tailwindcss/src/feature-flags.ts @@ -1 +1,2 @@ export const enableContainerSizeUtility = process.env.FEATURES_ENV !== 'stable' +export const enableScrollbarUtilities = process.env.FEATURES_ENV !== 'stable' diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 9f36de78252a..565b64523a3b 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -12,7 +12,7 @@ import { } from './ast' import type { Candidate, CandidateModifier, NamedUtilityValue } from './candidate' import type { DesignSystem } from './design-system' -import { enableContainerSizeUtility } from './feature-flags' +import { enableContainerSizeUtility, enableScrollbarUtilities } from './feature-flags' import type { Theme, ThemeKey } from './theme' import { compareBreakpoints } from './utils/compare-breakpoints' import { DefaultMap } from './utils/default-map' @@ -2209,35 +2209,37 @@ export function createUtilities(theme: Theme) { staticUtility('scroll-auto', [['scroll-behavior', 'auto']]) staticUtility('scroll-smooth', [['scroll-behavior', 'smooth']]) - staticUtility('scrollbar-auto', [['scrollbar-width', 'auto']]) - staticUtility('scrollbar-thin', [['scrollbar-width', 'thin']]) - staticUtility('scrollbar-none', [['scrollbar-width', 'none']]) + if (enableScrollbarUtilities) { + staticUtility('scrollbar-auto', [['scrollbar-width', 'auto']]) + staticUtility('scrollbar-thin', [['scrollbar-width', 'thin']]) + staticUtility('scrollbar-none', [['scrollbar-width', 'none']]) - { - let scrollbarColorProperties = () => { - return atRoot([ - property('--tw-scrollbar-thumb', '#0000', ''), - property('--tw-scrollbar-track', '#0000', ''), - ]) - } + { + let scrollbarColorProperties = () => { + return atRoot([ + property('--tw-scrollbar-thumb', '#0000', ''), + property('--tw-scrollbar-track', '#0000', ''), + ]) + } - colorUtility('scrollbar-thumb', { - themeKeys: ['--scrollbar-thumb-color', '--color'], - handle: (value) => [ - scrollbarColorProperties(), - decl('--tw-scrollbar-thumb', value), - decl('scrollbar-color', 'var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)'), - ], - }) + colorUtility('scrollbar-thumb', { + themeKeys: ['--scrollbar-thumb-color', '--color'], + handle: (value) => [ + scrollbarColorProperties(), + decl('--tw-scrollbar-thumb', value), + decl('scrollbar-color', 'var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)'), + ], + }) - colorUtility('scrollbar-track', { - themeKeys: ['--scrollbar-track-color', '--color'], - handle: (value) => [ - scrollbarColorProperties(), - decl('--tw-scrollbar-track', value), - decl('scrollbar-color', 'var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)'), - ], - }) + colorUtility('scrollbar-track', { + themeKeys: ['--scrollbar-track-color', '--color'], + handle: (value) => [ + scrollbarColorProperties(), + decl('--tw-scrollbar-track', value), + decl('scrollbar-color', 'var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)'), + ], + }) + } } staticUtility('truncate', [ From 3e7ad5a2d62e4975f7205107e8d6758284f2f4b6 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 28 Apr 2026 15:28:00 +0200 Subject: [PATCH 4/5] mark new scrollbar utilities as experimental --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 641fe1a5c17c..583715ec1453 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,10 +10,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - _Experimental_: add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901)) +- _Experimental_: add `scrollbar-{auto,thin,none}` utilities for `scrollbar-width`, and `scrollbar-thumb-*` / `scrollbar-track-*` color utilities for `scrollbar-color` - 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-{auto,thin,none}` utilities for `scrollbar-width`, and `scrollbar-thumb-*` / `scrollbar-track-*` color utilities for `scrollbar-color` ### Fixed From d8aa5826ecc870e74cd8eabb2bdee1b9c5ca7c5a Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 4 May 2026 17:15:54 +0200 Subject: [PATCH 5/5] Update CHANGELOG.md Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 583715ec1453..a7ba50dcd299 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,7 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - _Experimental_: add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901)) -- _Experimental_: add `scrollbar-{auto,thin,none}` utilities for `scrollbar-width`, and `scrollbar-thumb-*` / `scrollbar-track-*` color utilities for `scrollbar-color` +- _Experimental_: add `scrollbar-{auto,thin,none}` utilities for `scrollbar-width`, and `scrollbar-thumb-*` / `scrollbar-track-*` color utilities for `scrollbar-color` ([#19981](https://github.com/tailwindlabs/tailwindcss/pull/19981)) - 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))