scrollbar-gutter

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:

<div class="scrollbar-gutter-stable overflow-auto ...">  <!-- ... --></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="scrollbar-gutter-both overflow-auto ...">  <!-- ... --></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="scrollbar-gutter-auto overflow-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.