Skip to main content

Examples

Minimal example​

It's a good idea to start with an element that already has a scrollbar. Begin custom styling by adding either the scrollbar or scrollbar-thin utilities, then add a scrollbar-thumb-* and (optionally) a scrollbar-track-* utility to define your scrollbar colours.

<div class="scrollbar scrollbar-thumb-sky-700 scrollbar-track-sky-300 h-32 overflow-y-scroll">
    <div class="h-64 bg-slate-400"></div>
</div>

Global scrollbar colours​

The scollbar colour utilities are inherited, so if you want to use the same colours on every custom scrollbar, you can define them at a high-level element (e.g. html) and then simply add scrollbar or scrollbar-thin to each scrollbar you'd like to apply custom styling to.

<html className="scrollbar-thumb-sky-700 scrollbar-track-sky-300">
    <!-- ... -->
    <div className="scrollbar-thin h-32 overflow-y-scroll">
        <div className="h-64 bg-slate-400"></div>
    </div>
    <!-- ... -->
</html>

Variants​

Use the scrollbar-hover: and scrollbar-thumb: variants to apply utilties when the scrollbar's thumb is hovered or active, respectively. Note that only scrollbars that are being styled using pseudoelements will pay attention to these variants; standards-track scrollbars (like those used in FireFox exclusively and in Chrome/Edge by default) deal with hover and active states on their own.

warning

If you're using tailwind-scrollbar@v3, use the built-in hover: and active: variants instead of scrollbar-hover: and scrollbar-thumb:.

<div class="scrollbar-hover:scrollbar-thumb-sky-500 scrollbar-active:scrollbar-thumb-sky-400 h-32 scrollbar scrollbar-thumb-slate-700 scrollbar-track-slate-300 overflow-y-scroll">
    <div class="h-64 bg-slate-400"></div>
</div>

Custom colours​

The colour utilities can accept colours in any format Tailwind's native colour utilities like bg-* can, including custom colours and arbitrary values.

<div class="scrollbar-thumb-custom scrollbar-track-custom-light scrollbar-hover:scrollbar-thumb-[#059669] scrollbar-active:scrollbar-thumb-emerald-500/50 scrollbar h-32 overflow-y-scroll">
    <div class="h-64 bg-slate-400"></div>
</div>
@import 'tailwindcss';

/* ... */

@theme {
    --color-custom: #d1fae5;
    --color-custom-light: #10b981;
}

Corners​

When you have both a vertical and horizontal scrollbar, you'll end up with an empty box in the bottom right corner. You can use the scrollbar-corner-* utilities to colour this region as you would scrollbar-thumb-*.

<div class="scrollbar-corner-sky-500 scrollbar scrollbar-thumb-slate-700 scrollbar-track-slate-300 h-32 overflow-scroll">
    <div class="h-64 w-[100vw] bg-slate-400"></div>
</div>

Rounded bars​

These utilities only work in nocompatible mode, and have no effect on standards-track scrollbars. See configuration.

The scrollbar-*-rounded-* family of utilities can be applied to the thumb, track, or corner components, and work in the same was as Tailwind's native rounded-* utilities. Custom values and arbitrary values are permitted.

<div class="scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar scrollbar-thumb-slate-700 scrollbar-track-slate-300 h-32 overflow-y-scroll">
    <div class="h-64 bg-slate-400"></div>
</div>

Custom sizes​

These utilities only work in nocompatible mode, and have no effect on standards-track scrollbars. See configuration.

The scrollbar-w-* and scrollbar-h-* utilities can be used to fine-tine the width and height of scrollbars. Note that these only have effects on vertical and horizontal scrollbars, respectively, and can only be used with the scrollbar utility (not scrollbar-thin).

<div class="scrollbar-w-8 scrollbar scrollbar-thumb-slate-700 scrollbar-track-slate-300 h-32 overflow-y-scroll">
    <div class="h-64 bg-slate-400"></div>
</div>