Add scrollbar-width and scrollbar-color utilities

[adamwathan]

Summary

Adds utilities for the scrollbar-width and 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.

<div class="scrollbar-thin scrollbar-thumb-red-500 scrollbar-track-zinc-200">…</div>

Test plan

• pnpm test (all 4480 tests pass)
• 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
• intellisense.test.ts snapshot updated to include the new class names

---

Generated by Claude Code

[coderabbitai]

Walkthrough

This pull request adds new scrollbar-related Tailwind CSS utilities. It introduces three static utilities for scrollbar-width (auto, thin, none) and two color-mapped utilities (scrollbar-thumb and scrollbar-track). The color utilities emit @property registrations for CSS custom variables and generate scrollbar-color declarations, updating only the relevant variable while preserving the other via variable references. The implementation includes corresponding test coverage and CHANGELOG documentation.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main changes: adding scrollbar-width and scrollbar-color utilities.
Description check	✅ Passed	The description is directly related to the changeset, providing detailed explanation of the new utilities, their implementation, usage examples, and test coverage.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

CHANGELOG.md (1)

13-13: Add PR reference link for changelog consistency

Line 13 is the only new Unreleased bullet without a PR link, which makes it harder to trace. Please append ([#19981](https://github.com/tailwindlabs/tailwindcss/pull/19981)) like adjacent entries.

📝 Suggested patch

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

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@CHANGELOG.md` at line 13, Update the Unreleased changelog entry that
currently reads "Add `scrollbar-{auto,thin,none}` utilities for
`scrollbar-width`, and `scrollbar-thumb-*` / `scrollbar-track-*` color utilities
for `scrollbar-color`" by appending the PR reference
"([`#19981`](https://github.com/tailwindlabs/tailwindcss/pull/19981))" so it
matches adjacent entries; modify the exact bullet text in CHANGELOG.md to
include that PR link.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@CHANGELOG.md`:
- Line 13: Update the Unreleased changelog entry that currently reads "Add
`scrollbar-{auto,thin,none}` utilities for `scrollbar-width`, and
`scrollbar-thumb-*` / `scrollbar-track-*` color utilities for `scrollbar-color`"
by appending the PR reference
"([`#19981`](https://github.com/tailwindlabs/tailwindcss/pull/19981))" so it
matches adjacent entries; modify the exact bullet text in CHANGELOG.md to
include that PR link.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 078ec857-0330-4db4-95c9-73f8edba1c5b

📥 Commits

Reviewing files that changed from the base of the PR and between 3a890c3 and da4c45b.

⛔ Files ignored due to path filters (1)

• packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap is excluded by !**/*.snap

📒 Files selected for processing (3)

• CHANGELOG.md
• packages/tailwindcss/src/utilities.test.ts
• packages/tailwindcss/src/utilities.ts