Tailwind v3+ plugin to create classes for the scrollbar-gutter, scrollbar-width and scrollbar-color CSS properties.
MIT License
This plugin generates utility classes for scrollbar-gutter
,
scrollbar-width
,
and scrollbar-color
.
Add to your project via:
# Install using npm
npm install -D tailwind-scrollbar-utilities
# Install using yarn
yarn add -D tailwind-scrollbar-utilities
Add it to the plugins array of your Tailwind config. Call the functions for the utilities you want to use.
const { scrollbarGutter, scrollbarWidth, scrollbarColor } = require('tailwind-scrollbar-utilities');
plugins: [
scrollbarGutter(), // no options to configure
scrollbarWidth(), // no options to configure
scrollbarColor(), // no options to configure
]
scrollbar-gutter
scrollbar-gutter-auto
: Adds scrollbar-gutter: auto;
to the element.
scrollbar-gutter-stable
: Adds scrollbar-gutter: stable;
to the element.
scrollbar-gutter-stable
along with scrollbar-gutter-both-edges
: Adds scrollbar-gutter: stable both-edges;
to the element.
scrollbar-width
scrollbar-width-auto
: Adds scrollbar-width: auto;
to the element.
scrollbar-thin
: Adds scrollbar-width: thin;
to the element.
scrollbar-none
: Adds scrollbar-width: none;
to the element. It also adds a ::-webkit-scrollbar
fallback for better browser support.
scrollbar-color
scrollbar-color-auto
: Adds scrollbar-color: auto;
to the element.
scrollbar-thumb-{color}
: Sets the thumb color portion of the scrollbar color property.
scrollbar-track-{color}
: Sets the track color portion of the scrollbar color property.
scrollbar-color
: Adds scrollbar-color: {thumb-color} {track-color};
to the element. It's important to note you must set both color values for this to have any effect.
Where {color} is any available tailwind color e.g. scrollbar-thumb-teal-900
You can also use arbitrary values such as scrollbar-track-[Canvas]
.
This project is licensed under the MIT License.