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

tailwind-scrollbar is a plugin for Tailwind CSS that adds styling utilities for scrollbars with cross-browser support.

Motivation

There are currently two competing standards for styling scrollbars amongst browsers: the scrollbar-width and scrollbar-color properties used by Firefox and newer Chromium-based browsers, and the ::-webkit-scrollbar family of pseudoelements used by everything else. This plugin defines a single API for configuring both standards at once from within Tailwind.

Installation

1. Add the package to your project

# npm
npm install --save-dev tailwind-scrollbar
# yarn
yarn add -D tailwind-scrollbar
# pnpm
pnpm add -D tailwind-scrollbar

1. Add the plugin to your Tailwind config

@import 'tailwindcss';

/* ... */

@plugin 'tailwind-scrollbar';

Usage

See the documentation.

License

This project is licensed under the MIT License.