scrollbar-width

Utilities for controlling the width of an element's scrollbar.

Class Styles

Class	Styles
`scrollbar-auto`	`scrollbar-width: auto;`
`scrollbar-thin`	`scrollbar-width: thin;`
`scrollbar-none`	`scrollbar-width: none;`

scrollbar-auto

scrollbar-width: auto;

scrollbar-thin

scrollbar-width: thin;

scrollbar-none

scrollbar-width: none;

Examples

Using the default scrollbar width

Use the scrollbar-auto utility to use the browser's default scrollbar width:

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

Using a thin scrollbar

Use the scrollbar-thin utility to use a thinner scrollbar:

Scroll vertically

The Cerulean Archives occupy three narrow floors above the old observatory, each lined with drawers of star maps, expedition notes, and brass instruments cataloged by hand.

On winter mornings, the staff rolls ladders between the shelves while pale light cuts through the roof windows and settles on the reading tables.

Visitors can request anything from the collection, but most come for the atlases that chart coastlines no longer found on modern maps.

Every returned volume is inspected, dusted, and wrapped before being carried back into the stacks for the next researcher.

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

Hiding scrollbars

Use the scrollbar-none utility to hide scrollbars while still allowing an element to scroll:

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

These utilities only support the browser keywords auto, thin, and none.

Responsive design

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

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

Learn more about using variants in the variants documentation.