scrollbar-gutter utilities

[lukewarlow]

Thought i'd restart the discussions around scrollbar styling. While support for scrollbar-width and scrollbar-color would be great they are only supported inside of Firefox atm (coming to Chromium soon though). scrollbar-gutter however is supported in Chrome and Firefox and Safari is mostly used with overlay scrollbars which aren't affected so browser support is pretty good.

I understand the reason for not merging the original PR, but I thought I'd take the time to suggest this property specifically as I wanted to make clear it's distinct from scrollbar-width and scrollbar-color in that it has no legacy WebKit equivalent that Tailwind might want to consider supporting. It's a purely modern property solving a previously unsolvable use case, and as such probably wouldn't require as much thought on the API side from the team.

[lukewarlow]

I understand if the team would still rather hold off on supporting these until they can nail the API for all 3. In the meantime I've made https://github.com/lukewarlow/tailwind-scrollbar-utilities

[webbertakken]

scrollbar-gutter

Having tried scrollbar-gutter I've found that it conflicts in case you have a full-width element with a background color different from htmls background color.

• You can not solve this problem using a negative margin on a child element as it generates a horizontal scrollbar.
• Subsequently setting overflow-x: hidden | clip removes the scrollbar, but also the overflow beneath the gutter.

overflow-y: scroll

In my case it didn't look any better than overflow-y: scroll to statically enable the scrollbar. Of course this isn't ideal either as it also causes the very problem just described.

The problem

If you have full-width top-level blocks with background colors that differ from parent container or in case of scrollbar-gutter, the html element, you will end up with a bar next to the "full width" content in the color of the parent or html element.

A pragmatic solution

It actually looks a lot better if you apply a conditional padding to them (unnoticeable for desktop, not really needed for mobile).

Every time I've been building a new layout and research the topic, I've ended up best liking this answer on stack overflow. I usually apply it at the top level components - the ones that are full-width and have a background color. It looks as follows:

Styling

/* Apply this to top level containers to fix their layout shift when scrollbar appears */
@media (min-width: 1024px /* breakpoint for desktop layout */ ) {
  .top-level-container {
    padding-left: calc(100vw - 100%);
  }
}

Presentation

{/* root layout */}
<div className="flex min-h-full w-full flex-col"> 
  <header className="top-level-container bg-gray-800 pb-24">...</header>

  <main className="top-level-container flex-1 pb-8">...</main>

  <footer className="top-level-container bg-white">...</footer>
</div>

Note: If <main /> has multiple full-width blocks inside it with different background colors, you'll need to then split them up and add them directly into the root layout above.

[lukewarlow]

One thing to be aware of is scrollbar-gutter also had the both-edges modifier that mirrors the gutter. I agree that it would be nice if you could choose for some elements to push into the gutter however I think the simplicity of this property is pretty compelling when compared to the alternatives.

[webbertakken]

Sure, once it's fully supported scrollbar-gutter would work for designs where you don't have full-width content. However as long as we can't push overflows into the gutter it'll simply not work for many designs - the majority really: basically anything that has a navbar at the top or a footer at the bottom with either a border or a background color.

And let's be honest, coding for the web has been much more complicated in the past and designers and application developers haven't been known to often make concessions to the design because of (minor) added complexity when a complete solution is available.

I completely agree that scrollbar-gutter could be a step in the right direction. I just don't see it being used for said use cases.

[ackvf]

So now that overlay scrollbars are not supported any more, how do we solve this?
https://dev.to/jonosellier/easy-overlay-scrollbars-variable-width-1mbh
https://caniuse.com/css-overflow-overlay

[lukewarlow]

In the meantime while theres no support in tailwind proper here's a plugin that has utilities for scrollbar-gutter https://github.com/lukewarlow/tailwind-scrollbar-utilities

Beyond that I really don't know what the solution is.

[asineth0]

Any update on this?

[lukewarlow]

Unfortunately not yet. Hopefully it can be part of Tailwind 4

[shiny]

Unfortunately not yet. Hopefully it can be part of Tailwind 4

It doesn't seem to be part of Tailwind 4 yet.

[lukewarlow]

Yeah still no movement on scrollbar utilities, unfortunately.