tailwindcss-scrollbar

Tailwindcss plugin to customize browser scrollbar.

!npm bundle size (scoped)
!npm

Live Demo

Installation

``sh

Using npm

npm install -D @gradin/tailwindcss-scrollbar

Using Yarn

yarn add -D @gradin/tailwindcss-scrollbar
`

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

`js
module.exports = {
theme: {
// ...
},
plugins: [
require('@gradin/tailwindcss-scrollbar'),
],
}
`

Configuration

You can customize the size and color of the scrollbar. Also supports any css attributes such as borderRadius.

⚠️ See release notes if you are upgrading from v1 ⚠️

`js
module.exports = {
theme: {
// ...
},
plugins: [
require('@gradin/tailwindcss-scrollbar')({
size: '5px', // width or height, default '5px'
track: {
background: 'lightgray', // default '#f1f1f1'
// add other css attributes here,
// will be merged to ::-webkit-scrollbar-track
},
thumb: {
background: 'gray', // default '#c1c1c1'
borderRadius: '40px',
// add other css attributes here,
// will be merged to ::-webkit-scrollbar-thumb
},
hover: {
background: 'darkgray', // default '#a8a8a8'
borderRadius: '40px',
// add other css attributes here,
// will be merged to ::-webkit-scrollbar-thumb:hover
},
}),
],
}
`

To use attributes from your config.theme, you need to override theme.scrollbar.DEFAULT.

`js
module.exports = {
theme: {
// ...
scrollbar: theme => ({
DEFAULT: {
size: theme('spacing.1'),
track: {
background: theme('colors.gray.300'),
},
thumb: {
background: theme('colors.gray.400'),
},
hover: {
background: theme('colors.gray.500'),
},
},
})
},
plugins: [
require('@gradin/tailwindcss-scrollbar'),
],
}
`

Multiple scrollbar styles

You can add more scrollbar styles using theme.scrollbar.STYLE_NAME

They need to have size, track, thumb, hover property specified, as they don't have default value.

`js
module.exports = {
theme: {
// ...
scrollbar: {
thin: {
size: '2px',
track: { background: 'lightgray' },
thumb: { background: 'gray' },
hover: { background: 'darkgray' },
},
blue: {
size: '8px',
track: { background: 'lightblue' },
thumb: { background: 'blue' },
hover: { background: 'darkblue' },
},
},
},
}
`
`html

`

Dark Mode

To set different background color on dark mode, you can use darkBackground attribute. If unset, they will have the same color as the background.

`js
track: {
background: theme('colors.gray.300'),
darkBackground: theme('colors.gray.800'),
},
thumb: {
background: theme('colors.gray.400'),
darkBackground: theme('colors.gray.600'),
},
hover: {
background: theme('colors.gray.500'),
darkBackground: theme('colors.gray.500'),
},
`

Hides scrollbar.

To hide the scrollbar but still make it scrollable, use scrollbar-none class
on the element with overflow: auto | scroll.

`html

`

This is done by using scrollbar-width: none on Firefox and ::-webkit-scrollbar{display:none} on Chrome.

Browser Support

This plugin uses ::-webkit-scrollbar to modify scrollbar style.

Not supported in all versions of Firefox and Edge version 78 or older.

See Browser Compatibility

.scrollbar-none` is supported on Firefox version 64 or newer.