Add scrollbar-width utilities
#14183
Open
+42
−1
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
lukewarlow
changed the title
scrollbar-none, scrollbar-thin, scrollbar-width-auto utilitiesscrollbar-width utilities
lukewarlow
force-pushed
the
scrollbar-width-2
branch
from
328186d to
991aa8f
Compare
lukewarlow
force-pushed
the
scrollbar-width-2
branch
from
991aa8f to
b75417f
Compare
lukewarlow
force-pushed
the
scrollbar-width-2
branch
from
b75417f to
966177d
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This PR adds 3 new utilities for styling the width of scrollbars.
scrollbar-width-auto- For resetting a scrollbar to full-width, useful for overriding the other two*.scrollbar-thin- For setting thescrollbar-widthproperty tothin, which normally results in a thinner scrollbar.scrollbar-none- For setting thescrollbar-widthproperty tonone, which hides the scrollbar. This utility also includes a fallback to the legacy::-webkit-scrollbar { display: none; }. Read about::-webkit-scrollbarhere.scrollbar-nonemight take precendence overscrollbar-width-autoin WebKit (and chromium) browsers because the::-webkit-scrollbarrule beats thescrollbar-width: autorule.Why?
Styling of scrollbars is a long requested feature. See https://github.com/tailwindlabs/tailwindcss/discussions?discussions_q=is%3Aopen+scrollbar for a list of discussions requesting utilities for scrollbar styling.
This PR would be an initial step in that direction allowing authors to hide scrollbars (while maintaining the ability to scroll) in UIs where that is needed.
The naming of
scrollbar-width-autois different because the auto value is used across 3 separate scrollbar properties (scrollbar-width,scrollbar-colorandscrollbar-gutter. We could keep this inconsistency, change all values to bescrollbar-width-X, or we could drop the auto utility?scrollbar-widthhas 75% support according to caniuse. Though this andscrollbar-gutterare part of Interop 2024 and both thescrollbar-widthproperty andscrollbar-guttershipped in Safari 18.2.Due to the currently limited support mentioned above the
scrollbar-noneutility includes the::-webkit-scrollbarfallback to maximise Browser compatability including the fallback brings that utility up to 100% of the supported Tailwind browsers.See #5732 for a previous attempt at contributing this. No worries if the Tailwind team still aren't ready for scrollbar styling, but given the change in browser support status of this API, I thought I'd give it another go.
If the team are open to these contributions I'd happily also open one for
scrollbar-gutterand evenscrollbar-color(might need some API discussions but see #5751 for an initial idea)