tailwindcss-scroll-snap v1.1.0
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.
Class | Property |
---|---|
.snap-start | scroll-snap-align: start; |
.snap-end | scroll-snap-align: end; |
.snap-center | scroll-snap-align: center; |
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.
Class | Property |
---|---|
.no-snap | .scroll-snap-type: none; |
.snap | .scroll-snap-type: var(--scroll-snap-direction, both) var(--scroll-snap-constraint, mandatory) |
.snap-x | --scroll-snap-direction: x; |
.snap-y | --scroll-snap-direction: y; |
.snap-both | --scroll-snap-direction: both; |
.snap-block | --scroll-snap-direction: block; |
.snap-inline | --scroll-snap-direction: inline; |
.snap-mandatory | --scroll-snap-constraint: mandatory; |
.snap-proximity | --scroll-snap-constraint: proximity; |
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.
Class | Property |
---|---|
.always-stop | scroll-snap-stop: always; |
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.