Add utilities for `scrollbar-gutter`

[lukewarlow]

This PR adds utilities for the scrollbar-gutter CSS property.

Currently only supported in Chromium >= 94.

Firefox bug: https://bugzil.la/1715112 (Looks to be aiming to ship in version 97)

WebKit bug: https://webkit.org/b/167335

This is a useful property for avoiding horizontal layout shift.

Went with scrollbar-gutter-auto to avoid ambiguity with scrollbar-width: auto or scrollbar-color: auto

[adamwathan]

Sharing my comment from https://github.com/tailwindlabs/tailwindcss/pull/5732#issuecomment-940904566:

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!

[lukewarlow]

For the record it looks like Firefox will be shipping support for this property in version 97 if all goes to plan. Intent to ship

[lukewarlow]

Fwiw this is now supported in all major browsers except for Safari. Though Safari matters less due to the fact most Safari users will have overlay scrollbars which aren't affected by this property.

[zolrath]

Would love to see this land!

[adamwathan]

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! 🙌

[lukewarlow]

All I want to add is that the scrollbar-gutter property is a relatively standalone modern addition to CSS compared to scrollbar-width and colour which have WebKit prefixed alternatives and historical baggage.

So scrollbar -gutter could probably be addressed before the other two.

Saying that I understand if you feel it better to address them all in one go :)

[lukewarlow]

In case anyone comes across this issue I've made an npm package with a plugin for scrollbar gutter (along with width and color) utilities. See https://github.com/lukewarlow/tailwind-scrollbar-utilities

[hariacharya80]

@adamwathan @lukewarlow was there any changes made regarding this?

[lukewarlow]

@HariAcharya80 not yet.

I am working on adding support for the property inside of WebKit (hopefully land in Safari in the not too distant future). Once that happens it will have cross browser support.

Whether that then gets support inside of tailwind is another matter.