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

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.

Configuration

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

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

License

This project is licensed under the MIT License.