Skip to content

Commit da4c45b

Browse files
committed
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.
1 parent 3a890c3 commit da4c45b

4 files changed

Lines changed: 441 additions & 0 deletions

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+
- Add `scrollbar-{auto,thin,none}` utilities for `scrollbar-width`, and `scrollbar-thumb-*` / `scrollbar-track-*` color utilities for `scrollbar-color`
1314

1415
### Fixed
1516

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",

0 commit comments

Comments
 (0)