tailwind-scrollbar-utilities
v0.2.0
Published
Tailwind plugin for scrollbar class utilities
Downloads
10,144
Maintainers
Readme
TailwindCSS Scrollbar Utilities Plugin
This plugin generates utility classes for scrollbar-gutter
,
scrollbar-width
,
and scrollbar-color
.
Installation
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
]
Usage
scrollbar-gutter
scrollbar-gutter-auto
: Addsscrollbar-gutter: auto;
to the element.scrollbar-gutter-stable
: Addsscrollbar-gutter: stable;
to the element.scrollbar-gutter-stable
along withscrollbar-gutter-both-edges
: Addsscrollbar-gutter: stable both-edges;
to the element.
scrollbar-width
scrollbar-width-auto
: Addsscrollbar-width: auto;
to the element.scrollbar-thin
: Addsscrollbar-width: thin;
to the element.scrollbar-none
: Addsscrollbar-width: none;
to the element. It also adds a::-webkit-scrollbar
fallback for better browser support.
scrollbar-color
scrollbar-color-auto
: Addsscrollbar-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
: Addsscrollbar-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]
.
License
This project is licensed under the MIT License.