Update v5.0 - Preline MCP, AI Prompts, Animated Icons and more. Visit Changelog

........ Github
Figma X (Twitter)

Tailwind CSS Custom Scrollbar

Style WebKit custom scrollbars and native Tailwind CSS scrollbar utilities for width, gutter spacing, and colors.

Custom scrollbars

Use these WebKit scrollbar selector examples when you need visible custom scrollbars, rounded thumbs, or Preline theme scrollbar tokens.

Basic usage

This example creates a thin scrollbar with a themed track [&::-webkit-scrollbar-track]:bg-scrollbar-track and thumb [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb.

Item 1

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 1-1

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 1-2

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 2

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 3

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 3-1

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 3-2

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Rounded corners

Add rounded corners to the scrollbar track [&::-webkit-scrollbar-track]:rounded-full and thumb [&::-webkit-scrollbar-thumb]:rounded-full.

Item 1

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 1-1

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 1-2

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 2

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 3

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 3-1

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 3-2

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Tailwind CSS

Native Tailwind utilities

Tailwind CSS v4.3 includes native scrollbar utilities for standards-based width, gutter spacing, and colors. Use these when native browser behavior is enough, and keep the custom examples above for WebKit-specific styling like rounded scrollbar thumbs.

Scrollbar width

Use scrollbar-auto, scrollbar-thin, and scrollbar-none to control the native scrollbar width.

scrollbar-auto

The archive notes are arranged by region, author, and era. Scroll through this panel to see the browser's default scrollbar width.

Each returned volume is inspected, dusted, and wrapped before it is carried back into the stacks.

scrollbar-thin

The archive notes are arranged by region, author, and era. Scroll through this panel to see a thinner native scrollbar.

Each returned volume is inspected, dusted, and wrapped before it is carried back into the stacks.

scrollbar-none

The archive notes are arranged by region, author, and era. Scroll through this panel while keeping the scrollbar hidden.

Each returned volume is inspected, dusted, and wrapped before it is carried back into the stacks.

Scrollbar gutter

Use scrollbar-gutter-auto, scrollbar-gutter-stable, and scrollbar-gutter-both to control how much space the browser reserves for a native scrollbar.

scrollbar-gutter-auto

No reserved gutter. The content fills the inline edge.

scrollbar-gutter-stable

Stable keeps one reserved gutter visible.

scrollbar-gutter-both

Both keeps matching gutters on both sides.

Scrollbar color

Use utilities like scrollbar-thumb-stone-500 and scrollbar-track-stone-200 to control the native scrollbar colors.

Item 1

This native scrollbar uses Tailwind's track and thumb color utilities. Browser and operating system scrollbar settings can affect when the scrollbar is visible.

Item 1-1

This is some placeholder content for the custom scrollbar page. It is repeated throughout the component example to create a scrollable area.

Item 1-2

This is some placeholder content for the custom scrollbar page. It is repeated throughout the component example to create a scrollable area.

Item 2

This is some placeholder content for the custom scrollbar page. It is repeated throughout the component example to create a scrollable area.

Item 3

This is some placeholder content for the custom scrollbar page. It is repeated throughout the component example to create a scrollable area.

© 2026 Preline Labs.