tailwindcss-scrollbar
v0.1.0
Published
utility classes for webkit based scrollbars
Downloads
2,667
Readme
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
# Using npm
npm install tailwindcss-scrollbar
# Using yarn
yarn add tailwindcss-scrollbar
Then add the plugin to your tailwind.config.js
file:
// 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 -->
<html class="overflow-y-scroll">
...
<body class="scrollbar scrollbar-thumb-gray-400 scrollbar-track-gray-200">
...
</body>
</html>
{/* Next.js _document.js */}
<Html class="overflow-y-scroll">
...
<body class="scrollbar scrollbar-thumb-gray-400 scrollbar-track-gray-200">
...
Width modifiers
Width modifiers allow you to adjust the width of the scrollbar. This follows the values from theme.spacing
.
<!-- html -->
<html class="overflow-y-scroll">
...
<body class="scrollbar-w-1 scrollbar-thumb-gray-400 scrollbar-track-gray-200">
...
</body>
</html>
Color modifiers
Both the thumb
and track
have color modifiers based off of theme.colors
(see above examples).
Variants
If you want to add other variants such as dark
, responsive
, etc, add them to your config like so:
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require("tailwindcss-scrollbar"),
// ...
],
variants: {
scrollbar: ["dark"],
// ...
},
};