Notice

This plugin is now implemented in Tailwind JIT core and won't be updated anymore.

Scroll Snap

Introduction

tailwindcss-scroll-snap adds CSS Scroll Snap utilities to Tailwind CSS.

It makes use of CSS custom properties by default in order to make composable utilities for Scroll Snap Types, but you can override the scrollSnapType key in your Tailwind config if you don't want to use CSS custom properties.

Get started:

$ yarn add tailwindcss-scroll-snap --dev

After installing the NPM package, add it to the plugins part of tailwind.config.js.

module.exports = {
	theme: {},
	variants: {
		// Add variants as needed
		scrollSnapType: ['responsive'],
	},
	plugins: [require('tailwindcss-scroll-snap')],
};

Usage

This plugin creates utilities for scroll-snap-align, scroll-snap-type, scroll-snap-stop, scroll-margin and scroll-padding. Each of them can be used with variants.

Align

Utilities for the scroll-snap-align property.

You can override scrollSnapAlign in the theme of the Tailwind configuration if you want to change them.

Type

Utilities for the scroll-snap-type property.

These utilities work with composition. Except .no-snap, you need to combine them. If you're not happy with the way it works, you can override scrollSnapType in the theme of the Tailwind configuration.

<section class="snap snap-y snap-mandatory">
	<!-- ... -->
</section>

A configuration for variable-less scroll-snap-type utilities could look like that:

{
    'no-snap': 'none',
    'snap-y-mandatory': 'y mandatory',
    'snap-y-proximity': 'y proximity',
}

It is recommended that in the case where you need to override the configuration, you only add utilities you plan on actually using.

Stop

Utilities for the scroll-snap-stop property.

You can override scrollSnapStop in the theme of the Tailwind configuration if you want to change them.

Margin

Utilities for the scroll-margin property.

The default values are inherited from your theme's spacing values, negative values included, just like margin.

Also like margin, you can override them your Tailwind theme configuration under the scrollMargin key.

Padding

Utilities for the scroll-padding property.

The default values are inherited from your theme's spacing values, negative values included, just like padding.

Also like padding, you can override them your Tailwind theme configuration under the scrollPadding key.

Compatibility

Please note that IE11 doesn't support CSS custom properties. If you have to support IE11, please override the scroll-snap-type utilities.