tailwindcss-scrollbar

The tailwindcss-scrollbar plugin adds a set of customizable utility classes that you can use to add custom scrollbars in webkit based browsers.

Installation

Install the plugin from npm

``bash


Using npm

npm install tailwindcss-scrollbar

Using yarn

yarn add tailwindcss-scrollbar
`

Then add the plugin to your tailwind.config.js file:

`javascript
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require("tailwindcss-scrollbar"),
// ...
],
};
`

Usage

Now you can use the utility classes to add your custom scrollbar to any html/jsx:

`html


...

...


`

`jsx
{/ Next.js _document.js /}

...

...
`

$3

Width modifiers allow you to adjust the width of the scrollbar. This follows the values from theme.spacing.

`html


...

...


`

$3

Both the thumb and track have color modifiers based off of theme.colors (see above examples).

$3

If you want to add other variants such as dark, responsive, etc, add them to your config like so:

`javascript
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require("tailwindcss-scrollbar"),
// ...
],
variants: {
scrollbar: ["dark"],
// ...
},
};
``