open-index/open-npm huggingface dataset:
npm package: @subrotosaha/tailwind-scrollbar-style
Description: Adds scrollbar style utilities for Tailwind CSS
Author: Subroto Saha
Latest version: 1.1.2

# Tailwind Scrollbar Style

Scrollbar variants and utilities for Tailwind CSS 4.2.2.

## Requirements

- tailwindcss: 4.2.2
- Module format: ESM

## Install

```bash
npm install @subrotosaha/tailwind-scrollbar-style
```

## Setup Option A: CSS-first (No PostCSS Config)

In your main stylesheet (for example `src/app.css`):

```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:

```bash
npm install -D postcss @tailwindcss/postcss
```

Create `postcss.config.mjs`:

```js
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
```

Then register this plugin in your stylesheet the same way:

```css
@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

```html
<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

```html
<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

```html
<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.