# tailwind-scrollbar

> Tailwind plugin for styling scrollbars

Latest version **4.0.2** (published 2025-03-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install tailwind-scrollbar
pnpm add tailwind-scrollbar
yarn add tailwind-scrollbar
bun add tailwind-scrollbar
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.2 |
| Published | 2025-03-29 |
| First published | 2020-09-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=12.13.0 |
| Dependencies | 1 |
| Unpacked size | 15.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Graham Still |
| Maintainers | adoxography |

## Links

- npm: https://www.npmjs.com/package/tailwind-scrollbar
- Repository: https://github.com/adoxography/tailwind-scrollbar
- Issues: https://github.com/adoxography/tailwind-scrollbar/issues
- npm.io page: https://npm.io/package/tailwind-scrollbar

## Dependencies (1)

- [prism-react-renderer](https://npm.io/package/prism-react-renderer.md) ^2.4.1

## Recent versions

- 4.0.2 (latest) — 2025-03-29
- 4.0.0-beta.0 (next) — 2025-01-03
- 4.0.1 — 2025-02-23
- 4.0.0 — 2025-02-01
- 3.1.0 — 2024-02-11
- 3.1.0-rc.0 — 2024-01-28
- 3.0.5 — 2023-08-05
- 3.0.4 — 2023-05-14
- 3.0.3 — 2023-05-14
- 3.0.2 — 2023-05-14
- 3.0.1 — 2023-05-10
- 3.0.0 — 2023-03-14
- 2.1.0 — 2022-12-27
- 2.1.0-preview.0 — 2022-10-09
- 2.0.1 — 2022-09-05
- … 13 more at https://npm.io/package/tailwind-scrollbar/versions

## README

# Scrollbar Plugin for Tailwind CSS
![Tests](https://github.com/adoxography/tailwind-scrollbar/workflows/Tests/badge.svg)
[![Codacy Badge](https://app.codacy.com/project/badge/Grade/af892fe4afc048c4860462c5fc736675)](https://www.codacy.com/gh/adoxography/tailwind-scrollbar/dashboard?utm_source=github.com&utm_medium=referral&utm_content=adoxography/tailwind-scrollbar&utm_campaign=Badge_Grade)
![npm](https://img.shields.io/npm/dt/tailwind-scrollbar)

`tailwind-scrollbar` is a plugin for [Tailwind CSS](https://tailwindcss.com) that adds styling utilities for scrollbars with cross-browser support.

## Motivation
There are currently two competing standards for styling scrollbars amongst browsers: the [scrollbar-width](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width) and [scrollbar-color](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color) properties used by Firefox and newer Chromium-based browsers, and the [::-webkit-scrollbar](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar) family of pseudoelements used by everything else. This plugin defines a single API for configuring both standards at once from within Tailwind.

## Installation

1. Add the package to your project
```bash
# npm
npm install --save-dev tailwind-scrollbar
# yarn
yarn add -D tailwind-scrollbar
# pnpm
pnpm add -D tailwind-scrollbar
```

2. Add the plugin to your Tailwind config

```css
@import 'tailwindcss';

/* ... */

@plugin 'tailwind-scrollbar';
```

## Usage
See the [documentation](https://adoxography.github.io/tailwind-scrollbar/examples).

## License

This project is licensed under the [MIT License](/LICENSE).

---
_Source: https://npm.io/package/tailwind-scrollbar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._