scrollbar-gutter

Utilities for controlling the gutter space reserved for an element's scrollbar.

Class Styles

Class	Styles
`scrollbar-gutter-auto`	`scrollbar-gutter: auto;`
`scrollbar-gutter-stable`	`scrollbar-gutter: stable;`
`scrollbar-gutter-both`	`scrollbar-gutter: stable both-edges;`

scrollbar-gutter-auto

scrollbar-gutter: auto;

scrollbar-gutter-stable

scrollbar-gutter: stable;

scrollbar-gutter-both

scrollbar-gutter: stable both-edges;

Examples

Reserving space for the scrollbar

Use the scrollbar-gutter-stable utility to reserve space for the scrollbar even when an element isn't overflowing:

scrollbar-gutter-auto

Hey everyone! It’s almost 2027 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.

scrollbar-gutter-stable

Hey everyone! It’s almost 2027 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.

<div class="overflow-auto scrollbar-gutter-stable ...">  <!-- ... --></div>

Reserving space on both sides

Use the scrollbar-gutter-both utility to reserve matching gutter space on both sides of the element:

<div class="overflow-auto scrollbar-gutter-both ...">  <!-- ... --></div>

Using the default gutter

Use the scrollbar-gutter-auto utility to only reserve gutter space when the browser would normally show a scrollbar:

<div class="overflow-auto scrollbar-gutter-auto ...">  <!-- ... --></div>

Responsive design

Prefix a scrollbar-gutter utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="scrollbar-gutter-auto md:scrollbar-gutter-stable ...">  <!-- ... --></div>

Learn more about using variants in the variants documentation.