Skip to content

Commit b4db3b9

Browse files
adamwathanclaudeRobinMalfaitgreptile-apps[bot]
authored
Add scrollbar-width and scrollbar-color utilities (#19981)
## Summary Adds utilities for the [`scrollbar-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scrollbar-width) and [`scrollbar-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scrollbar-color) CSS properties. ### `scrollbar-width` Three static utilities mirroring the spec keywords: | Class | CSS | | --- | --- | | `scrollbar-auto` | `scrollbar-width: auto;` | | `scrollbar-thin` | `scrollbar-width: thin;` | | `scrollbar-none` | `scrollbar-width: none;` | ### `scrollbar-color` The `scrollbar-color` property takes two colors (thumb and track). To allow them to be set independently, two color utilities are added that share a pair of CSS variables (`--tw-scrollbar-thumb` and `--tw-scrollbar-track`), following the same pattern as the gradient stop utilities (`from-*` / `via-*` / `to-*`): | Class | CSS | | --- | --- | | `scrollbar-thumb-<color>` | `--tw-scrollbar-thumb: <color>; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);` | | `scrollbar-track-<color>` | `--tw-scrollbar-track: <color>; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);` | Both go through `colorUtility`, so they automatically support the standard color palette, theme keys (`--scrollbar-thumb-color` / `--scrollbar-track-color` with `--color` as a fallback), arbitrary values, and the `/<alpha>` opacity modifier. The variables are registered with `@property` (initial value `#0000`), matching the gradient-stop convention so an unset side falls back to transparent. ```html <div class="scrollbar-thin scrollbar-thumb-red-500 scrollbar-track-zinc-200">…</div> ``` ## Test plan - [x] `pnpm test` (all 4480 tests pass) - [x] New `scrollbar-width`, `scrollbar-thumb`, and `scrollbar-track` test cases in `utilities.test.ts` covering palette colors, theme-key colors, `current` / `inherit` / `transparent`, arbitrary colors, `/<alpha>` modifiers, and invalid candidates - [x] `intellisense.test.ts` snapshot updated to include the new class names --- _Generated by [Claude Code](https://claude.ai/code/session_014ajg5maQ4gUHKmqBs5o7vD)_ --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Robin Malfait <malfait.robin@gmail.com> Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
1 parent 08cad84 commit b4db3b9

5 files changed

Lines changed: 444 additions & 1 deletion

File tree

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1010
### Added
1111

1212
- _Experimental_: add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901))
13+
- _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))
1314
- Allow using `@variant` with stacked variants (e.g. `@variant hover:focus { … }`) ([#19996](https://github.com/tailwindlabs/tailwindcss/pull/19996))
1415
- Allow using `@variant` with compound variants (e.g. `@variant hover, focus { … }`) ([#19996](https://github.com/tailwindlabs/tailwindcss/pull/19996))
1516
- Support `--default(…)` in `--value(…)` and `--modifier(…)` for functional `@utility` definitions ([#19989](https://github.com/tailwindlabs/tailwindcss/pull/19989))

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

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11013,6 +11013,141 @@ exports[`getClassList 1`] = `
1101311013
"scroll-py-96",
1101411014
"scroll-py-px",
1101511015
"scroll-smooth",
11016+
"scrollbar-auto",
11017+
"scrollbar-none",
11018+
"scrollbar-thin",
11019+
"scrollbar-thumb-current",
11020+
"scrollbar-thumb-current/0",
11021+
"scrollbar-thumb-current/5",
11022+
"scrollbar-thumb-current/10",
11023+
"scrollbar-thumb-current/15",
11024+
"scrollbar-thumb-current/20",
11025+
"scrollbar-thumb-current/25",
11026+
"scrollbar-thumb-current/30",
11027+
"scrollbar-thumb-current/35",
11028+
"scrollbar-thumb-current/40",
11029+
"scrollbar-thumb-current/45",
11030+
"scrollbar-thumb-current/50",
11031+
"scrollbar-thumb-current/55",
11032+
"scrollbar-thumb-current/60",
11033+
"scrollbar-thumb-current/65",
11034+
"scrollbar-thumb-current/70",
11035+
"scrollbar-thumb-current/75",
11036+
"scrollbar-thumb-current/80",
11037+
"scrollbar-thumb-current/85",
11038+
"scrollbar-thumb-current/90",
11039+
"scrollbar-thumb-current/95",
11040+
"scrollbar-thumb-current/100",
11041+
"scrollbar-thumb-inherit",
11042+
"scrollbar-thumb-inherit/0",
11043+
"scrollbar-thumb-inherit/5",
11044+
"scrollbar-thumb-inherit/10",
11045+
"scrollbar-thumb-inherit/15",
11046+
"scrollbar-thumb-inherit/20",
11047+
"scrollbar-thumb-inherit/25",
11048+
"scrollbar-thumb-inherit/30",
11049+
"scrollbar-thumb-inherit/35",
11050+
"scrollbar-thumb-inherit/40",
11051+
"scrollbar-thumb-inherit/45",
11052+
"scrollbar-thumb-inherit/50",
11053+
"scrollbar-thumb-inherit/55",
11054+
"scrollbar-thumb-inherit/60",
11055+
"scrollbar-thumb-inherit/65",
11056+
"scrollbar-thumb-inherit/70",
11057+
"scrollbar-thumb-inherit/75",
11058+
"scrollbar-thumb-inherit/80",
11059+
"scrollbar-thumb-inherit/85",
11060+
"scrollbar-thumb-inherit/90",
11061+
"scrollbar-thumb-inherit/95",
11062+
"scrollbar-thumb-inherit/100",
11063+
"scrollbar-thumb-transparent",
11064+
"scrollbar-thumb-transparent/0",
11065+
"scrollbar-thumb-transparent/5",
11066+
"scrollbar-thumb-transparent/10",
11067+
"scrollbar-thumb-transparent/15",
11068+
"scrollbar-thumb-transparent/20",
11069+
"scrollbar-thumb-transparent/25",
11070+
"scrollbar-thumb-transparent/30",
11071+
"scrollbar-thumb-transparent/35",
11072+
"scrollbar-thumb-transparent/40",
11073+
"scrollbar-thumb-transparent/45",
11074+
"scrollbar-thumb-transparent/50",
11075+
"scrollbar-thumb-transparent/55",
11076+
"scrollbar-thumb-transparent/60",
11077+
"scrollbar-thumb-transparent/65",
11078+
"scrollbar-thumb-transparent/70",
11079+
"scrollbar-thumb-transparent/75",
11080+
"scrollbar-thumb-transparent/80",
11081+
"scrollbar-thumb-transparent/85",
11082+
"scrollbar-thumb-transparent/90",
11083+
"scrollbar-thumb-transparent/95",
11084+
"scrollbar-thumb-transparent/100",
11085+
"scrollbar-track-current",
11086+
"scrollbar-track-current/0",
11087+
"scrollbar-track-current/5",
11088+
"scrollbar-track-current/10",
11089+
"scrollbar-track-current/15",
11090+
"scrollbar-track-current/20",
11091+
"scrollbar-track-current/25",
11092+
"scrollbar-track-current/30",
11093+
"scrollbar-track-current/35",
11094+
"scrollbar-track-current/40",
11095+
"scrollbar-track-current/45",
11096+
"scrollbar-track-current/50",
11097+
"scrollbar-track-current/55",
11098+
"scrollbar-track-current/60",
11099+
"scrollbar-track-current/65",
11100+
"scrollbar-track-current/70",
11101+
"scrollbar-track-current/75",
11102+
"scrollbar-track-current/80",
11103+
"scrollbar-track-current/85",
11104+
"scrollbar-track-current/90",
11105+
"scrollbar-track-current/95",
11106+
"scrollbar-track-current/100",
11107+
"scrollbar-track-inherit",
11108+
"scrollbar-track-inherit/0",
11109+
"scrollbar-track-inherit/5",
11110+
"scrollbar-track-inherit/10",
11111+
"scrollbar-track-inherit/15",
11112+
"scrollbar-track-inherit/20",
11113+
"scrollbar-track-inherit/25",
11114+
"scrollbar-track-inherit/30",
11115+
"scrollbar-track-inherit/35",
11116+
"scrollbar-track-inherit/40",
11117+
"scrollbar-track-inherit/45",
11118+
"scrollbar-track-inherit/50",
11119+
"scrollbar-track-inherit/55",
11120+
"scrollbar-track-inherit/60",
11121+
"scrollbar-track-inherit/65",
11122+
"scrollbar-track-inherit/70",
11123+
"scrollbar-track-inherit/75",
11124+
"scrollbar-track-inherit/80",
11125+
"scrollbar-track-inherit/85",
11126+
"scrollbar-track-inherit/90",
11127+
"scrollbar-track-inherit/95",
11128+
"scrollbar-track-inherit/100",
11129+
"scrollbar-track-transparent",
11130+
"scrollbar-track-transparent/0",
11131+
"scrollbar-track-transparent/5",
11132+
"scrollbar-track-transparent/10",
11133+
"scrollbar-track-transparent/15",
11134+
"scrollbar-track-transparent/20",
11135+
"scrollbar-track-transparent/25",
11136+
"scrollbar-track-transparent/30",
11137+
"scrollbar-track-transparent/35",
11138+
"scrollbar-track-transparent/40",
11139+
"scrollbar-track-transparent/45",
11140+
"scrollbar-track-transparent/50",
11141+
"scrollbar-track-transparent/55",
11142+
"scrollbar-track-transparent/60",
11143+
"scrollbar-track-transparent/65",
11144+
"scrollbar-track-transparent/70",
11145+
"scrollbar-track-transparent/75",
11146+
"scrollbar-track-transparent/80",
11147+
"scrollbar-track-transparent/85",
11148+
"scrollbar-track-transparent/90",
11149+
"scrollbar-track-transparent/95",
11150+
"scrollbar-track-transparent/100",
1101611151
"select-all",
1101711152
"select-auto",
1101811153
"select-none",

‎packages/tailwindcss/src/feature-flags.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export const enableContainerSizeUtility = process.env.FEATURES_ENV !== 'stable'
2+
export const enableScrollbarUtilities = process.env.FEATURES_ENV !== 'stable'

0 commit comments

Comments
 (0)