tailwindcss-scrollbar

jonstuebe
js
tailwindcss-scrollbar JS library on GitHub tailwindcss-scrollbar JS library on npm Download tailwindcss-scrollbar JS library

utility classes for webkit based scrollbars

Version 0.1.0 License MIT
tailwindcss-scrollbar has no homepage
tailwindcss-scrollbar JS library on GitHub
tailwindcss-scrollbar JS library on npm
Download tailwindcss-scrollbar JS library
INSTALL
Type:
Version:
<script src=" https://cdn.jsdelivr.net/npm/tailwindcss-scrollbar@0.1.0/index.min.js "></script>
Learn more
Readme Files Statistics Browse CDN

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"],
    // ...
  },
};