Scrollbar Plugin for Tailwind CSS

Solve the problem of unavailability of tailwind-scrollbar under daisyui. If daisyui is not used or similar problems occur, please use the module released by the original author. Original module GitHub address Adds styling utilities for scrollbars in Firefox and webkit-based browsers.

Installation

yarn add -D daisyui-tailwind-scrollbar

or

npm install --save-dev daisyui-tailwind-scrollbar

Add it to the plugins array of your Tailwind config.

plugins: [
    // ...
    require('daisyui-tailwind-scrollbar'),
],

Usage

NB: This plugin styles scrollbars; it does not force them to appear. Use typical CSS techniques to force content to overflow and trigger a scrollbar.

For every element that you want to style, add either the .scrollbar or .scrollbar-thin class. You may then add any scrollbar-track-{color}, scrollbar-thumb-{color} or hover:scrollbar-thumb-{color} classes you like. (Note that hover:scrollbar-thumb-{color} classes only have effects in webkit-based browsers.)

Here's a minimal example (keeping in mind that the h-32 and h-64 classes are just there to force the scrollbar to appear):

<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100">
    <div class="h-64"></div>
</div>

A live version of this demo can be found here.

Configuration

If you'd like to add variants for the scrollbar utilities (e.g. dark mode), add them to the variants object in your Tailwind config:

variants: {
    // ...
    scrollbar: ['dark']
}

This plugin also capable of adding utilties for creating rounded scrollbars (by referencing your configured border radius settings). However, as they are only supported in Webkit-based browsers, their usage is inadvisable in cross-browser applications. To enable rounded scrollbar utilities, add 'rounded' to the list of scrollbar variants in your config file. This will add utilities such as scrollbar-thumb-rounded or scrollbar-thumb-rounded-md.

License

This project is licensed under the MIT License.