Tailwind Scrollbar Style

Scrollbar variants and utilities for Tailwind CSS 4.2.2.

Requirements

• tailwindcss: 4.2.2
• Module format: ESM

Install

npm install @subrotosaha/tailwind-scrollbar-style

Setup Option A: CSS-first (No PostCSS Config)

In your main stylesheet (for example src/app.css):

@import "tailwindcss";
@plugin "@subrotosaha/tailwind-scrollbar-style";

Use this option when you compile Tailwind directly (CLI/Vite integration) and do not need a custom PostCSS pipeline.

Setup Option B: PostCSS

Install Tailwind's PostCSS plugin if your project compiles CSS through PostCSS:

npm install -D postcss @tailwindcss/postcss

Create postcss.config.mjs:

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Then register this plugin in your stylesheet the same way:

@import "tailwindcss";
@plugin "@subrotosaha/tailwind-scrollbar-style";

What This Plugin Adds

Variants

| Variant prefix | Generated pseudo-element | | ----------------------- | --------------------------------- | | scrollbar | ::-webkit-scrollbar | | scrollbar-button | ::-webkit-scrollbar-button | | scrollbar-thumb | ::-webkit-scrollbar-thumb | | scrollbar-track | ::-webkit-scrollbar-track | | scrollbar-track-piece | ::-webkit-scrollbar-track-piece | | scrollbar-corner | ::-webkit-scrollbar-corner | | scrollbar-resizer | ::-webkit-resizer |

Utilities

• scrollbar-width-auto
• scrollbar-width-inherit
• scrollbar-width-initial
• scrollbar-width-none
• scrollbar-width-revert
• scrollbar-width-thin
• scrollbar-width-unset
• overflow-overlay
• overflow-x-overlay
• overflow-y-overlay

Usage Examples

Thin scrollbar with custom colors

<div
  class="h-48 overflow-y-auto scrollbar-width-thin scrollbar:w-2 scrollbar-track:bg-slate-200/70 scrollbar-thumb:bg-slate-500/70 hover:scrollbar-thumb:bg-slate-600"
>
  ...
</div>

Rounded scrollbar thumb

<div
  class="h-48 overflow-y-auto scrollbar:w-2.5 scrollbar-thumb:rounded-full scrollbar-thumb:bg-zinc-700/60"
>
  ...
</div>

Horizontal scrollbar styling

<div
  class="overflow-x-auto whitespace-nowrap scrollbar:h-2 scrollbar-track:bg-stone-200 scrollbar-thumb:bg-stone-500"
>
  ...
</div>

Browser Notes

• ::-webkit-* pseudo-element variants apply in Chromium, Edge, and Safari.
• scrollbar-width-* utilities target Firefox.
• overflow: overlay is non-standard and may be ignored by modern browsers.