Skip to content

Tailwind v3+ plugin to create classes for the scrollbar-gutter, scrollbar-width and scrollbar-color CSS properties.

License

Notifications You must be signed in to change notification settings

lukewarlow/tailwind-scrollbar-utilities

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

TailwindCSS Scrollbar Utilities Plugin

npm

This plugin generates utility classes for scrollbar-gutter, scrollbar-width, and scrollbar-color.

Installation

Add to your project via:

# Install using npm
npm install -D tailwind-scrollbar-utilities

# Install using yarn
yarn add -D tailwind-scrollbar-utilities

Add it to the plugins array of your Tailwind config. Call the functions for the utilities you want to use.

const { scrollbarGutter, scrollbarWidth, scrollbarColor } = require('tailwind-scrollbar-utilities');

plugins: [
	scrollbarGutter(), // no options to configure
	scrollbarWidth(), // no options to configure
	scrollbarColor(), // no options to configure
]

Usage

  • scrollbar-gutter-auto: Adds scrollbar-gutter: auto; to the element.

  • scrollbar-gutter-stable: Adds scrollbar-gutter: stable; to the element.

  • scrollbar-gutter-stable along with scrollbar-gutter-both-edges: Adds scrollbar-gutter: stable both-edges; to the element.

  • scrollbar-width-auto: Adds scrollbar-width: auto; to the element.

  • scrollbar-thin: Adds scrollbar-width: thin; to the element.

  • scrollbar-none: Adds scrollbar-width: none; to the element. It also adds a ::-webkit-scrollbar fallback for better browser support.

  • scrollbar-color-auto: Adds scrollbar-color: auto; to the element.

  • scrollbar-thumb-{color}: Sets the thumb color portion of the scrollbar color property.

  • scrollbar-track-{color}: Sets the track color portion of the scrollbar color property.

  • scrollbar-color: Adds scrollbar-color: {thumb-color} {track-color}; to the element. It's important to note you must set both color values for this to have any effect.

Where {color} is any available tailwind color e.g. scrollbar-thumb-teal-900

You can also use arbitrary values such as scrollbar-track-[Canvas].

License

This project is licensed under the MIT License.