No description
b4db3b99d1
## 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> |
||
|---|---|---|
| .github | ||
| crates | ||
| integrations | ||
| packages | ||
| patches | ||
| playgrounds | ||
| scripts | ||
| .gitignore | ||
| .prettierignore | ||
| Cargo.lock | ||
| Cargo.toml | ||
| CHANGELOG.md | ||
| LICENSE | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| rust-toolchain.toml | ||
| turbo.json | ||
| vitest.config.ts | ||
A utility-first CSS framework for rapidly building custom user interfaces.
Documentation
For full documentation, visit tailwindcss.com.
Community
For help, discussion about best practices, or feature ideas:
Discuss Tailwind CSS on GitHub
Contributing
If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.