tailwind-scrollbar

What is tailwind-scrollbar?

The tailwind-scrollbar npm package is a plugin for Tailwind CSS that allows you to customize the appearance of scrollbars in your web applications. It provides utility classes to style scrollbars in a way that is consistent with the rest of your Tailwind CSS design.

What are tailwind-scrollbar's main functionalities?

Custom Scrollbar Width

This feature allows you to apply a thin scrollbar to an element, making the scrollbar less obtrusive and more visually appealing.

.scrollbar-thin { @apply scrollbar-thin; }

Custom Scrollbar Colors

This feature allows you to change the color of the scrollbar thumb, which is the draggable part of the scrollbar. You can use any color from your Tailwind CSS color palette.

.scrollbar-thumb-blue { @apply scrollbar-thumb-blue-500; }

Custom Scrollbar Track Colors

This feature allows you to change the color of the scrollbar track, which is the area the thumb moves along. You can use any color from your Tailwind CSS color palette.

.scrollbar-track-gray { @apply scrollbar-track-gray-300; }

Other packages similar to tailwind-scrollbar

simplebar

SimpleBar is a custom scrollbar library that aims to be simple and lightweight. It provides a more consistent scrollbar appearance across different browsers and operating systems. Unlike tailwind-scrollbar, SimpleBar is not specifically designed for Tailwind CSS but can be integrated with it.

react-custom-scrollbars

React Custom Scrollbars is a customizable scrollbar component for React. It provides a more flexible and customizable approach to styling scrollbars compared to tailwind-scrollbar, but it requires more setup and is specific to React applications.

overlayscrollbars

OverlayScrollbars is a highly customizable scrollbar library that can be used with various frameworks, including vanilla JavaScript, React, and Angular. It offers more advanced features and customization options compared to tailwind-scrollbar, but it is also more complex to set up.

README

Scrollbar Plugin for Tailwind CSS

Adds styling utilities for scrollbars in Firefox and webkit-based browsers.

Installation

yarn add -D tailwind-scrollbar

or

npm install --save-dev tailwind-scrollbar

Add it to the plugins array of your Tailwind config.

plugins: [
    // ...
    require('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.