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 2 months 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 (about 3 years ago)
• Default Branch: master
• Last Pushed: 2021-12-10T15:59:22.000Z (almost 3 years ago)
• Last Synced: 2024-07-23T19:00:50.468Z (2 months ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/tailwind-scroll-behavior
• Size: 6.84 KB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# TailwindCSS Scroll Behavior Plugin

[![npm](https://img.shields.io/npm/v/tailwind-scroll-behavior.svg?style=flat-square)](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).