Add utilities for scrollbar-width
#5732
Conversation
lukewarlow
force-pushed
the
scrollbar-width
branch
from
a8fc9d3 to
05664dd
Compare
| @@ -1272,6 +1272,19 @@ export let corePlugins = { | |||
| }) | |||
| }, | |||
|
|
|||
| scrollbarWidth: ({ addUtilities }) => { | |||
| addUtilities({ | |||
| '.scrollbar-auto': { 'scrollbar-width': 'auto' }, | |||
There was a problem hiding this comment.
Should this be scrollbar-width-auto to avoid ambiguity with potential future utilities for scrollbar-gutter: auto or scrollbar-color: auto
There was a problem hiding this comment.
#5750 - in my PR for scrollbar-gutter, I've gone with scrollbar-gutter-auto, as I imagine scrollbar-width will be the one to "claim" the ambiguous class if any property does.
|
Thanks for this! Just a head's up it's probably going to take a while to review this — I've wanted to add scrollbar related utilities for a long time but have never found the right chance to sit down and study all of the properties, browser compatibility, etc. and then really design the ideal API, and that's all stuff I'll have to do before we can merge these ones. It's possible I don't get a chance to really get into this until like December after we finish v3.0 and this can target v3.1 perhaps. Hope that's understandable, thanks again! |
|
That's absolutely fine. These are simple enough to add to a project through plugins for the time being. Better to have good ergonomics and take a bit longer to reach Core. |
|
Hopefully in the meantime browser support gets a bit better for one or more of the properties. |
|
Awesome, thanks man! PS. I was born in Wales 🏴 |
|
#5751 - relevant discussion I made regarding |
|
I think this's really helpful for things like hiding scrollbar? |
|
I created a plugin to handle styling scrollbars. It may be useful to see how I set it up. https://github.com/brandonpittman/tailwindcss-plugin-fancy/blob/master/src/scrollbars.ts |
|
Unfortunately looks like Potentially worth simply adding the |
|
Hey folks! I definitely want to add support for this stuff at some point but as you can see it's taking a while for it to get to the top of the priority list, and I can't merge in support for a significant feature like this without taking the time to really dig in to the underlying CSS features and make sure I fully agree with the API we're exposing and how it all works. I'm not sure when I'm going to get around to doing that but this has been open for a year and a half with no movement on my end yet, so I'm going to close it for now. Definitely do want to add it eventually and when we do I'll make sure you get proper credit in the commit history, but just not ready to work on it right now. Really appreciate it regardless and looking forward to getting to this at some point, but letting PRs sit open for this long isn't how I want to run the project — I'd like to either merge things fast or say "no for now" and revisit when I'm able to give an idea my full attention. Thank you again! 🙌 |
|
In case anyone comes across this issue I've made an npm package with a plugin for scrollbar width (along with gutter and color) utilities. See https://github.com/lukewarlow/tailwind-scrollbar-utilities |
|
I've filed a Chromium Intent to Ship for standard scrollbar properties as an fyi: https://groups.google.com/a/chromium.org/g/blink-dev/c/PkEsMirl2zE |
This PR adds utlities for the
scrollbar-widthCSS property.Supported in Firefox for a while.
Chrome is supported behind a flag as of 115.
I'm midway through implementing support in WebKit.
Chrome (in-progress) bug: https://crbug.com/891944
Safari bug: https://webkit.org/b/231588
The
scrollbar-noneclass also works with older Chrome and Safari with the fallback to the::-webkit-scrollbarpseudo element.