Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

tailwind-scrollbar-utilities

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

tailwind-scrollbar-utilities

Tailwind plugin for scrollbar class utilities

  • 0.2.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2.4K
decreased by-11.93%
Maintainers
1
Weekly downloads
 
Created
Source

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

  • 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

  • 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

  • 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.

Keywords

FAQs

Package last updated on 18 Apr 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc