tsb

tailwind-scroll-behavior

Tailwind plugin to create classes for the scroll-behavior property

Showing:

Popularity

Downloads/wk

83

GitHub Stars

8

Maintenance

Last Commit

1mo ago

Contributors

0

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

TailwindCSS Scroll Behavior Plugin

npm

This plugin generates scroll-behavior classes.

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:

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

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.

variants: {
    scrollBehavior: ['motion-safe', 'motion-reduce', 'responsive']
}

License

This project is licensed under the MIT License.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100