https://github.com/lukewarlow/tailwind-scrollbar-utilities
Tailwind v4 plugin to create classes for the scrollbar-gutter, scrollbar-width and scrollbar-color CSS properties.
https://github.com/lukewarlow/tailwind-scrollbar-utilities
css css-scrollbar hacktoberfest scrollbar scrollbar-color scrollbar-gutter scrollbar-width scrollbars tailwind tailwindcss utilties
Last synced: 3 months ago
JSON representation
Tailwind v4 plugin to create classes for the scrollbar-gutter, scrollbar-width and scrollbar-color CSS properties.
- Host: GitHub
- URL: https://github.com/lukewarlow/tailwind-scrollbar-utilities
- Owner: lukewarlow
- License: mit
- Created: 2023-04-14T15:45:03.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2025-02-13T00:07:54.000Z (4 months ago)
- Last Synced: 2025-03-31T13:17:24.137Z (3 months ago)
- Topics: css, css-scrollbar, hacktoberfest, scrollbar, scrollbar-color, scrollbar-gutter, scrollbar-width, scrollbars, tailwind, tailwindcss, utilties
- Language: CSS
- Homepage: https://www.npmjs.com/package/tailwind-scrollbar-utilities
- Size: 118 KB
- Stars: 33
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TailwindCSS Scrollbar Utilities Plugin
[](https://www.npmjs.com/package/tailwind-scrollbar-utilities)
This plugin generates utility classes for [`scrollbar-gutter`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter),
[`scrollbar-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width),
and [`scrollbar-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color).
## Installation
Add to your project via:
```bash
# Install using npm
npm install -D tailwind-scrollbar-utilities
# Install using yarn
yarn add -D tailwind-scrollbar-utilities
```
### When using CSS config
Add an import for the plugin in your CSS file. You cannot currently import only specific groups of utilities.
```css
@import "tailwind-scrollbar-utilities";
```
## Usage
### [`scrollbar-gutter`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter)
- `scrollbar-gutter-auto`: Adds `scrollbar-gutter: auto;` to the element.
- `scrollbar-stable`: Adds `scrollbar-gutter: stable;` to the element.
- `scrollbar-stable` along with `scrollbar-both-edges`: Adds `scrollbar-gutter: stable both-edges;` to the element.
### [`scrollbar-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/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`](https://developer.mozilla.org/en-US/docs/Web/CSS/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](https://github.com/lukewarlow/tailwind-scrollbar-utilities/blob/master/LICENSE).