2.0.5 • Published 5 months ago
tailwind-scrollbar-variants v2.0.5
Tailwind CSS Plugin - Scrollbar Variants
This plugin adds scrollbar variants
Features
The built in Overflow class
<div class="overflow-[<x|y>-]overlay">...</div>
Prefix | Pseudo-Element |
---|---|
scrollbar | ::-webkit-scrollbar |
scrollbar-button | ::-webkit-scrollbar-button |
scrollbar-thumb | ::-webkit-scrollbar-thumb |
scrollbar-track | ::-webkit-scrollbar-track |
scrollbar-track-piece | ::-webkit-scrollbar-track-piece |
scrollbar-corner | ::-webkit-scrollbar-corner |
scrollbar-resizer | ::-webkit-resizer |
Examples
x-axis margins
<div class="scrollbar-track:mx-4">...</div>
Adjusted thumb opacity
<div class="scrollbar-thumb:bg-opacity-[0.1]">...</div>
Or get really crazy
Adjusted background color and opacity (shorthand)
<div class="scrollbar-thumb:bg-red-500/[0.26]">...</div>
Installation
Add it at the end of the plugins list in your tailwind.config.js
file.
module.exports = {
// ...
plugins: [
// ...
require("tailwind-scrollbar-variant"),
],
};