https://github.com/lukewarlow/tailwind-scroll-behavior
Tailwind v2 plugin to create classes for the scroll-behavior property
https://github.com/lukewarlow/tailwind-scroll-behavior
Last synced: about 1 month ago
JSON representation
Tailwind v2 plugin to create classes for the scroll-behavior property
- Host: GitHub
- URL: https://github.com/lukewarlow/tailwind-scroll-behavior
- Owner: lukewarlow
- License: mit
- Archived: true
- Created: 2021-07-10T14:09:36.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-12-10T15:59:22.000Z (almost 4 years ago)
- Last Synced: 2025-09-16T13:26:16.929Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/tailwind-scroll-behavior
- Size: 6.84 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TailwindCSS Scroll Behavior Plugin
[](https://www.npmjs.com/package/tailwind-scroll-behavior)
This plugin generates [scroll-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior) classes.
Note: As of TailwindCSS v3 these utilities are included by default.
A `scroll-smooth` and `scroll-auto` class will be created.
It is recommended that you use `scroll-smooth` in combination with Tailwind's `motion-safe` variant.
This will only enable smooth scrolling for users who have not specified they prefer reduced motion.
## Installation
Add to your project via:
```bash
# Install using npm
npm install -D tailwind-scroll-behavior
# Install using yarn
yarn add -D tailwind-scroll-behavior
```
Add it to the plugins array of your Tailwind config.
```js
plugins: [
require('tailwind-scroll-behavior')(), // no options to configure
]
```
By default, this plugin works with the `motion-safe` and `motion-reduce` variants. However, you can customise the
variants for the plugin, by adding to the variants section of your Tailwind config.
```js
variants: {
scrollBehavior: ['motion-safe', 'motion-reduce', 'responsive']
}
```
## License
This project is licensed under the [MIT License](https://github.com/lukewarlow/tailwind-scroll-behavior/blob/master/LICENSE).