A utility-first CSS framework for rapid UI development.
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>
A
Adam Wathan committed
b4db3b99d1bc6209a936df34914e0fc34b3e5095
Parent: 08cad84
Committed by GitHub <noreply@github.com>
on 5/4/2026, 3:16:50 PM