tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

Add utilities for `scrollbar-width`

Open lukewarlow opened this issue 2 years ago • 8 comments

This PR adds utlities for the scrollbar-width CSS property.

Currently only implemented in Firefox.

Chrome (in-progress) bug: https://crbug.com/891944

Safari bug: https://webkit.org/b/231588

The scrollbar-none class also works with Chrome and Safari with the fallback to the ::-webkit-scrollbar pseudo element.

lukewarlow avatar Oct 07 '21 22:10 lukewarlow

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!

adamwathan avatar Oct 12 '21 18:10 adamwathan

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.

lukewarlow avatar Oct 12 '21 18:10 lukewarlow

Hopefully in the meantime browser support gets a bit better for one or more of the properties.

lukewarlow avatar Oct 12 '21 18:10 lukewarlow

Awesome, thanks man! PS. I was born in Wales 🏴󠁧󠁢󠁷󠁬󠁳󠁿

adamwathan avatar Oct 12 '21 18:10 adamwathan

https://github.com/tailwindlabs/tailwindcss/discussions/5751 - relevant discussion I made regarding scrollbar-color property. Just linking here so it's all linked together.

lukewarlow avatar Oct 12 '21 19:10 lukewarlow

I think this's really helpful for things like hiding scrollbar? when are we ready to release it?

hydRAnger avatar Oct 28 '21 14:10 hydRAnger

I created a plugin to handle styling scrollbars. It may be useful to see how I set it up.


brandonpittman avatar Dec 16 '21 11:12 brandonpittman

Unfortunately looks like scrollbar-width property is still only supported in Firefox.

Potentially worth simply adding the scrollbar-none class which includes the webkit fallback and dropping at least the thin version. This way users are able to hide scrollbars (which I suspect is what the vast majority actually care about).

lukewarlow avatar Mar 26 '22 19:03 lukewarlow