Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lukewarlow/tailwind-scrollbar-utilities
Tailwind v3+ 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: 4 months ago
JSON representation
Tailwind v3+ 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 (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-04-18T20:45:50.000Z (almost 2 years ago)
- Last Synced: 2024-09-29T10:45:41.564Z (4 months ago)
- Topics: css, css-scrollbar, hacktoberfest, scrollbar, scrollbar-color, scrollbar-gutter, scrollbar-width, scrollbars, tailwind, tailwindcss, utilties
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/tailwind-scrollbar-utilities
- Size: 113 KB
- Stars: 27
- Watchers: 1
- Forks: 1
- 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
```
Add it to the plugins array of your Tailwind config. Call the functions for the utilities you want to use.
```js
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`](https://developer.mozilla.org/en-US/docs/Web/CSS/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`](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).