tailwindcss/packages
Adam Wathan b4db3b99d1
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>
2026-05-04 17:16:50 +02:00
..
@tailwindcss-browser Bump dependencies (#19957) 2026-04-24 21:21:12 +02:00
@tailwindcss-cli Update enhanced-resolve 5.20.1 → 5.21.0 (minor) (#19998) 2026-05-01 11:29:19 +00:00
@tailwindcss-node Update enhanced-resolve 5.20.1 → 5.21.0 (minor) (#19998) 2026-05-01 11:29:19 +00:00
@tailwindcss-postcss Improve codebase quality (#19999) 2026-04-30 23:32:37 +02:00
@tailwindcss-standalone Update enhanced-resolve 5.20.1 → 5.21.0 (minor) (#19998) 2026-05-01 11:29:19 +00:00
@tailwindcss-upgrade Update enhanced-resolve 5.20.1 → 5.21.0 (minor) (#19998) 2026-05-01 11:29:19 +00:00
@tailwindcss-vite docs: fix various typos in comments and documentation (#19878) 2026-04-29 13:28:39 +00:00
@tailwindcss-webpack Bump dependencies (#19957) 2026-04-24 21:21:12 +02:00
internal-example-plugin Prefix internal modules with internal-* (#14074) 2024-07-29 10:58:07 -04:00
tailwindcss Add scrollbar-width and scrollbar-color utilities (#19981) 2026-05-04 17:16:50 +02:00
tsconfig.base.json Improve debug logs (#15303) 2024-12-11 15:27:20 +01:00