Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/innocenzi/tailwindcss-scroll-snap
CSS Scroll Snap utilities for Tailwind CSS
https://github.com/innocenzi/tailwindcss-scroll-snap
Last synced: 3 months ago
JSON representation
CSS Scroll Snap utilities for Tailwind CSS
- Host: GitHub
- URL: https://github.com/innocenzi/tailwindcss-scroll-snap
- Owner: innocenzi
- Archived: true
- Created: 2020-01-07T15:37:46.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-09-29T14:02:42.000Z (over 2 years ago)
- Last Synced: 2024-02-18T22:46:48.472Z (4 months ago)
- Language: CSS
- Homepage:
- Size: 1.17 MB
- Stars: 174
- Watchers: 3
- Forks: 8
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Lists
- awesome-tailwindcss - Scroll Snap - Adds `scroll-snap` utilities. (Plugins)
- tailwindcss-awesome - innocenzi/tailwindcss-scroll-snap - CSS Scroll Snap utilities for Tailwind CSS <br/> (8 stars / 2021-02-13 / 54 commits ) (Running the update / By Popularity)
README
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](https://css-tricks.com/practical-css-scroll-snapping/) utilities to Tailwind CSS.
It makes use of [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) by default in order to make composable utilities for [Scroll Snap Types](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-type), but you can override the `scrollSnapType` key in your Tailwind config if you don't want to use CSS custom properties.
**Get started:**
```console
$ yarn add tailwindcss-scroll-snap --dev
```
After installing the NPM package, add it to the plugins part of `tailwind.config.js`.
```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`](#align), [`scroll-snap-type`](#Type), [`scroll-snap-stop`](#Stop), [`scroll-margin`](#margin) and [`scroll-padding`](#Padding). Each of them [can be used with variants](https://tailwindcss.com/docs/configuration/#variants).
## Align
Utilities for the [`scroll-snap-align`](https://developer.mozilla.org/docs/Web/CSS/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`](https://developer.mozilla.org/docs/Web/CSS/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.
```html
```
A configuration for variable-less `scroll-snap-type` utilities could look like that:
```js
{
'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`](https://developer.mozilla.org/docs/Web/CSS/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`](https://developer.mozilla.org/docs/Web/CSS/scroll-margin) property.
See the default list.
Class
Property
.snap-m-0
scroll-margin: 0;
.snap-m-1
scroll-margin: 0.25rem;
.snap-m-2
scroll-margin: 0.5rem;
.snap-m-3
scroll-margin: 0.75rem;
.snap-m-4
scroll-margin: 1rem;
.snap-m-5
scroll-margin: 1.25rem;
.snap-m-6
scroll-margin: 1.5rem;
.snap-m-8
scroll-margin: 2rem;
.snap-m-10
scroll-margin: 2.5rem;
.snap-m-12
scroll-margin: 3rem;
.snap-m-16
scroll-margin: 4rem;
.snap-m-20
scroll-margin: 5rem;
.snap-m-24
scroll-margin: 6rem;
.snap-m-32
scroll-margin: 8rem;
.snap-m-40
scroll-margin: 10rem;
.snap-m-48
scroll-margin: 12rem;
.snap-m-56
scroll-margin: 14rem;
.snap-m-64
scroll-margin: 16rem;
.snap-m-auto
scroll-margin: auto;
.snap-m-px
scroll-margin: 1px;
.-snap-m-1
scroll-margin: -0.25rem;
.-snap-m-2
scroll-margin: -0.5rem;
.-snap-m-3
scroll-margin: -0.75rem;
.-snap-m-4
scroll-margin: -1rem;
.-snap-m-5
scroll-margin: -1.25rem;
.-snap-m-6
scroll-margin: -1.5rem;
.-snap-m-8
scroll-margin: -2rem;
.-snap-m-10
scroll-margin: -2.5rem;
.-snap-m-12
scroll-margin: -3rem;
.-snap-m-16
scroll-margin: -4rem;
.-snap-m-20
scroll-margin: -5rem;
.-snap-m-24
scroll-margin: -6rem;
.-snap-m-32
scroll-margin: -8rem;
.-snap-m-40
scroll-margin: -10rem;
.-snap-m-48
scroll-margin: -12rem;
.-snap-m-56
scroll-margin: -14rem;
.-snap-m-64
scroll-margin: -16rem;
.-snap-m-px
scroll-margin: -1px;
.snap-my-0
scroll-margin-top: 0; scroll-margin-bottom: 0;
.snap-mx-0
scroll-margin-left: 0; scroll-margin-right: 0;
.snap-my-1
scroll-margin-top: 0.25rem; scroll-margin-bottom: 0.25rem;
.snap-mx-1
scroll-margin-left: 0.25rem; scroll-margin-right: 0.25rem;
.snap-my-2
scroll-margin-top: 0.5rem; scroll-margin-bottom: 0.5rem;
.snap-mx-2
scroll-margin-left: 0.5rem; scroll-margin-right: 0.5rem;
.snap-my-3
scroll-margin-top: 0.75rem; scroll-margin-bottom: 0.75rem;
.snap-mx-3
scroll-margin-left: 0.75rem; scroll-margin-right: 0.75rem;
.snap-my-4
scroll-margin-top: 1rem; scroll-margin-bottom: 1rem;
.snap-mx-4
scroll-margin-left: 1rem; scroll-margin-right: 1rem;
.snap-my-5
scroll-margin-top: 1.25rem; scroll-margin-bottom: 1.25rem;
.snap-mx-5
scroll-margin-left: 1.25rem; scroll-margin-right: 1.25rem;
.snap-my-6
scroll-margin-top: 1.5rem; scroll-margin-bottom: 1.5rem;
.snap-mx-6
scroll-margin-left: 1.5rem; scroll-margin-right: 1.5rem;
.snap-my-8
scroll-margin-top: 2rem; scroll-margin-bottom: 2rem;
.snap-mx-8
scroll-margin-left: 2rem; scroll-margin-right: 2rem;
.snap-my-10
scroll-margin-top: 2.5rem; scroll-margin-bottom: 2.5rem;
.snap-mx-10
scroll-margin-left: 2.5rem; scroll-margin-right: 2.5rem;
.snap-my-12
scroll-margin-top: 3rem; scroll-margin-bottom: 3rem;
.snap-mx-12
scroll-margin-left: 3rem; scroll-margin-right: 3rem;
.snap-my-16
scroll-margin-top: 4rem; scroll-margin-bottom: 4rem;
.snap-mx-16
scroll-margin-left: 4rem; scroll-margin-right: 4rem;
.snap-my-20
scroll-margin-top: 5rem; scroll-margin-bottom: 5rem;
.snap-mx-20
scroll-margin-left: 5rem; scroll-margin-right: 5rem;
.snap-my-24
scroll-margin-top: 6rem; scroll-margin-bottom: 6rem;
.snap-mx-24
scroll-margin-left: 6rem; scroll-margin-right: 6rem;
.snap-my-32
scroll-margin-top: 8rem; scroll-margin-bottom: 8rem;
.snap-mx-32
scroll-margin-left: 8rem; scroll-margin-right: 8rem;
.snap-my-40
scroll-margin-top: 10rem; scroll-margin-bottom: 10rem;
.snap-mx-40
scroll-margin-left: 10rem; scroll-margin-right: 10rem;
.snap-my-48
scroll-margin-top: 12rem; scroll-margin-bottom: 12rem;
.snap-mx-48
scroll-margin-left: 12rem; scroll-margin-right: 12rem;
.snap-my-56
scroll-margin-top: 14rem; scroll-margin-bottom: 14rem;
.snap-mx-56
scroll-margin-left: 14rem; scroll-margin-right: 14rem;
.snap-my-64
scroll-margin-top: 16rem; scroll-margin-bottom: 16rem;
.snap-mx-64
scroll-margin-left: 16rem; scroll-margin-right: 16rem;
.snap-my-auto
scroll-margin-top: auto; scroll-margin-bottom: auto;
.snap-mx-auto
scroll-margin-left: auto; scroll-margin-right: auto;
.snap-my-px
scroll-margin-top: 1px; scroll-margin-bottom: 1px;
.snap-mx-px
scroll-margin-left: 1px; scroll-margin-right: 1px;
.-snap-my-1
scroll-margin-top: -0.25rem; scroll-margin-bottom: -0.25rem;
.-snap-mx-1
scroll-margin-left: -0.25rem; scroll-margin-right: -0.25rem;
.-snap-my-2
scroll-margin-top: -0.5rem; scroll-margin-bottom: -0.5rem;
.-snap-mx-2
scroll-margin-left: -0.5rem; scroll-margin-right: -0.5rem;
.-snap-my-3
scroll-margin-top: -0.75rem; scroll-margin-bottom: -0.75rem;
.-snap-mx-3
scroll-margin-left: -0.75rem; scroll-margin-right: -0.75rem;
.-snap-my-4
scroll-margin-top: -1rem; scroll-margin-bottom: -1rem;
.-snap-mx-4
scroll-margin-left: -1rem; scroll-margin-right: -1rem;
.-snap-my-5
scroll-margin-top: -1.25rem; scroll-margin-bottom: -1.25rem;
.-snap-mx-5
scroll-margin-left: -1.25rem; scroll-margin-right: -1.25rem;
.-snap-my-6
scroll-margin-top: -1.5rem; scroll-margin-bottom: -1.5rem;
.-snap-mx-6
scroll-margin-left: -1.5rem; scroll-margin-right: -1.5rem;
.-snap-my-8
scroll-margin-top: -2rem; scroll-margin-bottom: -2rem;
.-snap-mx-8
scroll-margin-left: -2rem; scroll-margin-right: -2rem;
.-snap-my-10
scroll-margin-top: -2.5rem; scroll-margin-bottom: -2.5rem;
.-snap-mx-10
scroll-margin-left: -2.5rem; scroll-margin-right: -2.5rem;
.-snap-my-12
scroll-margin-top: -3rem; scroll-margin-bottom: -3rem;
.-snap-mx-12
scroll-margin-left: -3rem; scroll-margin-right: -3rem;
.-snap-my-16
scroll-margin-top: -4rem; scroll-margin-bottom: -4rem;
.-snap-mx-16
scroll-margin-left: -4rem; scroll-margin-right: -4rem;
.-snap-my-20
scroll-margin-top: -5rem; scroll-margin-bottom: -5rem;
.-snap-mx-20
scroll-margin-left: -5rem; scroll-margin-right: -5rem;
.-snap-my-24
scroll-margin-top: -6rem; scroll-margin-bottom: -6rem;
.-snap-mx-24
scroll-margin-left: -6rem; scroll-margin-right: -6rem;
.-snap-my-32
scroll-margin-top: -8rem; scroll-margin-bottom: -8rem;
.-snap-mx-32
scroll-margin-left: -8rem; scroll-margin-right: -8rem;
.-snap-my-40
scroll-margin-top: -10rem; scroll-margin-bottom: -10rem;
.-snap-mx-40
scroll-margin-left: -10rem; scroll-margin-right: -10rem;
.-snap-my-48
scroll-margin-top: -12rem; scroll-margin-bottom: -12rem;
.-snap-mx-48
scroll-margin-left: -12rem; scroll-margin-right: -12rem;
.-snap-my-56
scroll-margin-top: -14rem; scroll-margin-bottom: -14rem;
.-snap-mx-56
scroll-margin-left: -14rem; scroll-margin-right: -14rem;
.-snap-my-64
scroll-margin-top: -16rem; scroll-margin-bottom: -16rem;
.-snap-mx-64
scroll-margin-left: -16rem; scroll-margin-right: -16rem;
.-snap-my-px
scroll-margin-top: -1px; scroll-margin-bottom: -1px;
.-snap-mx-px
scroll-margin-left: -1px; scroll-margin-right: -1px;
.snap-mt-0
scroll-margin-top: 0;
.snap-mr-0
scroll-margin-right: 0;
.snap-mb-0
scroll-margin-bottom: 0;
.snap-ml-0
scroll-margin-left: 0;
.snap-mt-1
scroll-margin-top: 0.25rem;
.snap-mr-1
scroll-margin-right: 0.25rem;
.snap-mb-1
scroll-margin-bottom: 0.25rem;
.snap-ml-1
scroll-margin-left: 0.25rem;
.snap-mt-2
scroll-margin-top: 0.5rem;
.snap-mr-2
scroll-margin-right: 0.5rem;
.snap-mb-2
scroll-margin-bottom: 0.5rem;
.snap-ml-2
scroll-margin-left: 0.5rem;
.snap-mt-3
scroll-margin-top: 0.75rem;
.snap-mr-3
scroll-margin-right: 0.75rem;
.snap-mb-3
scroll-margin-bottom: 0.75rem;
.snap-ml-3
scroll-margin-left: 0.75rem;
.snap-mt-4
scroll-margin-top: 1rem;
.snap-mr-4
scroll-margin-right: 1rem;
.snap-mb-4
scroll-margin-bottom: 1rem;
.snap-ml-4
scroll-margin-left: 1rem;
.snap-mt-5
scroll-margin-top: 1.25rem;
.snap-mr-5
scroll-margin-right: 1.25rem;
.snap-mb-5
scroll-margin-bottom: 1.25rem;
.snap-ml-5
scroll-margin-left: 1.25rem;
.snap-mt-6
scroll-margin-top: 1.5rem;
.snap-mr-6
scroll-margin-right: 1.5rem;
.snap-mb-6
scroll-margin-bottom: 1.5rem;
.snap-ml-6
scroll-margin-left: 1.5rem;
.snap-mt-8
scroll-margin-top: 2rem;
.snap-mr-8
scroll-margin-right: 2rem;
.snap-mb-8
scroll-margin-bottom: 2rem;
.snap-ml-8
scroll-margin-left: 2rem;
.snap-mt-10
scroll-margin-top: 2.5rem;
.snap-mr-10
scroll-margin-right: 2.5rem;
.snap-mb-10
scroll-margin-bottom: 2.5rem;
.snap-ml-10
scroll-margin-left: 2.5rem;
.snap-mt-12
scroll-margin-top: 3rem;
.snap-mr-12
scroll-margin-right: 3rem;
.snap-mb-12
scroll-margin-bottom: 3rem;
.snap-ml-12
scroll-margin-left: 3rem;
.snap-mt-16
scroll-margin-top: 4rem;
.snap-mr-16
scroll-margin-right: 4rem;
.snap-mb-16
scroll-margin-bottom: 4rem;
.snap-ml-16
scroll-margin-left: 4rem;
.snap-mt-20
scroll-margin-top: 5rem;
.snap-mr-20
scroll-margin-right: 5rem;
.snap-mb-20
scroll-margin-bottom: 5rem;
.snap-ml-20
scroll-margin-left: 5rem;
.snap-mt-24
scroll-margin-top: 6rem;
.snap-mr-24
scroll-margin-right: 6rem;
.snap-mb-24
scroll-margin-bottom: 6rem;
.snap-ml-24
scroll-margin-left: 6rem;
.snap-mt-32
scroll-margin-top: 8rem;
.snap-mr-32
scroll-margin-right: 8rem;
.snap-mb-32
scroll-margin-bottom: 8rem;
.snap-ml-32
scroll-margin-left: 8rem;
.snap-mt-40
scroll-margin-top: 10rem;
.snap-mr-40
scroll-margin-right: 10rem;
.snap-mb-40
scroll-margin-bottom: 10rem;
.snap-ml-40
scroll-margin-left: 10rem;
.snap-mt-48
scroll-margin-top: 12rem;
.snap-mr-48
scroll-margin-right: 12rem;
.snap-mb-48
scroll-margin-bottom: 12rem;
.snap-ml-48
scroll-margin-left: 12rem;
.snap-mt-56
scroll-margin-top: 14rem;
.snap-mr-56
scroll-margin-right: 14rem;
.snap-mb-56
scroll-margin-bottom: 14rem;
.snap-ml-56
scroll-margin-left: 14rem;
.snap-mt-64
scroll-margin-top: 16rem;
.snap-mr-64
scroll-margin-right: 16rem;
.snap-mb-64
scroll-margin-bottom: 16rem;
.snap-ml-64
scroll-margin-left: 16rem;
.snap-mt-auto
scroll-margin-top: auto;
.snap-mr-auto
scroll-margin-right: auto;
.snap-mb-auto
scroll-margin-bottom: auto;
.snap-ml-auto
scroll-margin-left: auto;
.snap-mt-px
scroll-margin-top: 1px;
.snap-mr-px
scroll-margin-right: 1px;
.snap-mb-px
scroll-margin-bottom: 1px;
.snap-ml-px
scroll-margin-left: 1px;
.-snap-mt-1
scroll-margin-top: -0.25rem;
.-snap-mr-1
scroll-margin-right: -0.25rem;
.-snap-mb-1
scroll-margin-bottom: -0.25rem;
.-snap-ml-1
scroll-margin-left: -0.25rem;
.-snap-mt-2
scroll-margin-top: -0.5rem;
.-snap-mr-2
scroll-margin-right: -0.5rem;
.-snap-mb-2
scroll-margin-bottom: -0.5rem;
.-snap-ml-2
scroll-margin-left: -0.5rem;
.-snap-mt-3
scroll-margin-top: -0.75rem;
.-snap-mr-3
scroll-margin-right: -0.75rem;
.-snap-mb-3
scroll-margin-bottom: -0.75rem;
.-snap-ml-3
scroll-margin-left: -0.75rem;
.-snap-mt-4
scroll-margin-top: -1rem;
.-snap-mr-4
scroll-margin-right: -1rem;
.-snap-mb-4
scroll-margin-bottom: -1rem;
.-snap-ml-4
scroll-margin-left: -1rem;
.-snap-mt-5
scroll-margin-top: -1.25rem;
.-snap-mr-5
scroll-margin-right: -1.25rem;
.-snap-mb-5
scroll-margin-bottom: -1.25rem;
.-snap-ml-5
scroll-margin-left: -1.25rem;
.-snap-mt-6
scroll-margin-top: -1.5rem;
.-snap-mr-6
scroll-margin-right: -1.5rem;
.-snap-mb-6
scroll-margin-bottom: -1.5rem;
.-snap-ml-6
scroll-margin-left: -1.5rem;
.-snap-mt-8
scroll-margin-top: -2rem;
.-snap-mr-8
scroll-margin-right: -2rem;
.-snap-mb-8
scroll-margin-bottom: -2rem;
.-snap-ml-8
scroll-margin-left: -2rem;
.-snap-mt-10
scroll-margin-top: -2.5rem;
.-snap-mr-10
scroll-margin-right: -2.5rem;
.-snap-mb-10
scroll-margin-bottom: -2.5rem;
.-snap-ml-10
scroll-margin-left: -2.5rem;
.-snap-mt-12
scroll-margin-top: -3rem;
.-snap-mr-12
scroll-margin-right: -3rem;
.-snap-mb-12
scroll-margin-bottom: -3rem;
.-snap-ml-12
scroll-margin-left: -3rem;
.-snap-mt-16
scroll-margin-top: -4rem;
.-snap-mr-16
scroll-margin-right: -4rem;
.-snap-mb-16
scroll-margin-bottom: -4rem;
.-snap-ml-16
scroll-margin-left: -4rem;
.-snap-mt-20
scroll-margin-top: -5rem;
.-snap-mr-20
scroll-margin-right: -5rem;
.-snap-mb-20
scroll-margin-bottom: -5rem;
.-snap-ml-20
scroll-margin-left: -5rem;
.-snap-mt-24
scroll-margin-top: -6rem;
.-snap-mr-24
scroll-margin-right: -6rem;
.-snap-mb-24
scroll-margin-bottom: -6rem;
.-snap-ml-24
scroll-margin-left: -6rem;
.-snap-mt-32
scroll-margin-top: -8rem;
.-snap-mr-32
scroll-margin-right: -8rem;
.-snap-mb-32
scroll-margin-bottom: -8rem;
.-snap-ml-32
scroll-margin-left: -8rem;
.-snap-mt-40
scroll-margin-top: -10rem;
.-snap-mr-40
scroll-margin-right: -10rem;
.-snap-mb-40
scroll-margin-bottom: -10rem;
.-snap-ml-40
scroll-margin-left: -10rem;
.-snap-mt-48
scroll-margin-top: -12rem;
.-snap-mr-48
scroll-margin-right: -12rem;
.-snap-mb-48
scroll-margin-bottom: -12rem;
.-snap-ml-48
scroll-margin-left: -12rem;
.-snap-mt-56
scroll-margin-top: -14rem;
.-snap-mr-56
scroll-margin-right: -14rem;
.-snap-mb-56
scroll-margin-bottom: -14rem;
.-snap-ml-56
scroll-margin-left: -14rem;
.-snap-mt-64
scroll-margin-top: -16rem;
.-snap-mr-64
scroll-margin-right: -16rem;
.-snap-mb-64
scroll-margin-bottom: -16rem;
.-snap-ml-64
scroll-margin-left: -16rem;
.-snap-mt-px
scroll-margin-top: -1px;
.-snap-mr-px
scroll-margin-right: -1px;
.-snap-mb-px
scroll-margin-bottom: -1px;
.-snap-ml-px
scroll-margin-left: -1px ;
The default values are inherited from your theme's spacing values, negative values included, just like [`margin`](https://tailwindcss.com/docs/margin).
Also like `margin`, you can override them your Tailwind theme configuration under the `scrollMargin` key.
## Padding
Utilities for the [`scroll-padding`](https://developer.mozilla.org/docs/Web/CSS/scroll-padding) property.
See the default list.
Class
Property
.snap-p-0
scroll-padding: 0;
.snap-p-1
scroll-padding: 0.25rem;
.snap-p-2
scroll-padding: 0.5rem;
.snap-p-3
scroll-padding: 0.75rem;
.snap-p-4
scroll-padding: 1rem;
.snap-p-5
scroll-padding: 1.25rem;
.snap-p-6
scroll-padding: 1.5rem;
.snap-p-8
scroll-padding: 2rem;
.snap-p-10
scroll-padding: 2.5rem;
.snap-p-12
scroll-padding: 3rem;
.snap-p-16
scroll-padding: 4rem;
.snap-p-20
scroll-padding: 5rem;
.snap-p-24
scroll-padding: 6rem;
.snap-p-32
scroll-padding: 8rem;
.snap-p-40
scroll-padding: 10rem;
.snap-p-48
scroll-padding: 12rem;
.snap-p-56
scroll-padding: 14rem;
.snap-p-64
scroll-padding: 16rem;
.snap-p-px
scroll-padding: 1px;
.snap-py-0
scroll-padding-top: 0; scroll-padding-bottom: 0;
.snap-px-0
scroll-padding-left: 0; scroll-padding-right: 0;
.snap-py-1
scroll-padding-top: 0.25rem; scroll-padding-bottom: 0.25rem;
.snap-px-1
scroll-padding-left: 0.25rem; scroll-padding-right: 0.25rem;
.snap-py-2
scroll-padding-top: 0.5rem; scroll-padding-bottom: 0.5rem;
.snap-px-2
scroll-padding-left: 0.5rem; scroll-padding-right: 0.5rem;
.snap-py-3
scroll-padding-top: 0.75rem; scroll-padding-bottom: 0.75rem;
.snap-px-3
scroll-padding-left: 0.75rem; scroll-padding-right: 0.75rem;
.snap-py-4
scroll-padding-top: 1rem; scroll-padding-bottom: 1rem;
.snap-px-4
scroll-padding-left: 1rem; scroll-padding-right: 1rem;
.snap-py-5
scroll-padding-top: 1.25rem; scroll-padding-bottom: 1.25rem;
.snap-px-5
scroll-padding-left: 1.25rem; scroll-padding-right: 1.25rem;
.snap-py-6
scroll-padding-top: 1.5rem; scroll-padding-bottom: 1.5rem;
.snap-px-6
scroll-padding-left: 1.5rem; scroll-padding-right: 1.5rem;
.snap-py-8
scroll-padding-top: 2rem; scroll-padding-bottom: 2rem;
.snap-px-8
scroll-padding-left: 2rem; scroll-padding-right: 2rem;
.snap-py-10
scroll-padding-top: 2.5rem; scroll-padding-bottom: 2.5rem;
.snap-px-10
scroll-padding-left: 2.5rem; scroll-padding-right: 2.5rem;
.snap-py-12
scroll-padding-top: 3rem; scroll-padding-bottom: 3rem;
.snap-px-12
scroll-padding-left: 3rem; scroll-padding-right: 3rem;
.snap-py-16
scroll-padding-top: 4rem; scroll-padding-bottom: 4rem;
.snap-px-16
scroll-padding-left: 4rem; scroll-padding-right: 4rem;
.snap-py-20
scroll-padding-top: 5rem; scroll-padding-bottom: 5rem;
.snap-px-20
scroll-padding-left: 5rem; scroll-padding-right: 5rem;
.snap-py-24
scroll-padding-top: 6rem; scroll-padding-bottom: 6rem;
.snap-px-24
scroll-padding-left: 6rem; scroll-padding-right: 6rem;
.snap-py-32
scroll-padding-top: 8rem; scroll-padding-bottom: 8rem;
.snap-px-32
scroll-padding-left: 8rem; scroll-padding-right: 8rem;
.snap-py-40
scroll-padding-top: 10rem; scroll-padding-bottom: 10rem;
.snap-px-40
scroll-padding-left: 10rem; scroll-padding-right: 10rem;
.snap-py-48
scroll-padding-top: 12rem; scroll-padding-bottom: 12rem;
.snap-px-48
scroll-padding-left: 12rem; scroll-padding-right: 12rem;
.snap-py-56
scroll-padding-top: 14rem; scroll-padding-bottom: 14rem;
.snap-px-56
scroll-padding-left: 14rem; scroll-padding-right: 14rem;
.snap-py-64
scroll-padding-top: 16rem; scroll-padding-bottom: 16rem;
.snap-px-64
scroll-padding-left: 16rem; scroll-padding-right: 16rem;
.snap-py-px
scroll-padding-top: 1px; scroll-padding-bottom: 1px;
.snap-px-px
scroll-padding-left: 1px; scroll-padding-right: 1px;
.snap-pt-0
scroll-padding-top: 0;
.snap-pr-0
scroll-padding-right: 0;
.snap-pb-0
scroll-padding-bottom: 0;
.snap-pl-0
scroll-padding-left: 0;
.snap-pt-1
scroll-padding-top: 0.25rem;
.snap-pr-1
scroll-padding-right: 0.25rem;
.snap-pb-1
scroll-padding-bottom: 0.25rem;
.snap-pl-1
scroll-padding-left: 0.25rem;
.snap-pt-2
scroll-padding-top: 0.5rem;
.snap-pr-2
scroll-padding-right: 0.5rem;
.snap-pb-2
scroll-padding-bottom: 0.5rem;
.snap-pl-2
scroll-padding-left: 0.5rem;
.snap-pt-3
scroll-padding-top: 0.75rem;
.snap-pr-3
scroll-padding-right: 0.75rem;
.snap-pb-3
scroll-padding-bottom: 0.75rem;
.snap-pl-3
scroll-padding-left: 0.75rem;
.snap-pt-4
scroll-padding-top: 1rem;
.snap-pr-4
scroll-padding-right: 1rem;
.snap-pb-4
scroll-padding-bottom: 1rem;
.snap-pl-4
scroll-padding-left: 1rem;
.snap-pt-5
scroll-padding-top: 1.25rem;
.snap-pr-5
scroll-padding-right: 1.25rem;
.snap-pb-5
scroll-padding-bottom: 1.25rem;
.snap-pl-5
scroll-padding-left: 1.25rem;
.snap-pt-6
scroll-padding-top: 1.5rem;
.snap-pr-6
scroll-padding-right: 1.5rem;
.snap-pb-6
scroll-padding-bottom: 1.5rem;
.snap-pl-6
scroll-padding-left: 1.5rem;
.snap-pt-8
scroll-padding-top: 2rem;
.snap-pr-8
scroll-padding-right: 2rem;
.snap-pb-8
scroll-padding-bottom: 2rem;
.snap-pl-8
scroll-padding-left: 2rem;
.snap-pt-10
scroll-padding-top: 2.5rem;
.snap-pr-10
scroll-padding-right: 2.5rem;
.snap-pb-10
scroll-padding-bottom: 2.5rem;
.snap-pl-10
scroll-padding-left: 2.5rem;
.snap-pt-12
scroll-padding-top: 3rem;
.snap-pr-12
scroll-padding-right: 3rem;
.snap-pb-12
scroll-padding-bottom: 3rem;
.snap-pl-12
scroll-padding-left: 3rem;
.snap-pt-16
scroll-padding-top: 4rem;
.snap-pr-16
scroll-padding-right: 4rem;
.snap-pb-16
scroll-padding-bottom: 4rem;
.snap-pl-16
scroll-padding-left: 4rem;
.snap-pt-20
scroll-padding-top: 5rem;
.snap-pr-20
scroll-padding-right: 5rem;
.snap-pb-20
scroll-padding-bottom: 5rem;
.snap-pl-20
scroll-padding-left: 5rem;
.snap-pt-24
scroll-padding-top: 6rem;
.snap-pr-24
scroll-padding-right: 6rem;
.snap-pb-24
scroll-padding-bottom: 6rem;
.snap-pl-24
scroll-padding-left: 6rem;
.snap-pt-32
scroll-padding-top: 8rem;
.snap-pr-32
scroll-padding-right: 8rem;
.snap-pb-32
scroll-padding-bottom: 8rem;
.snap-pl-32
scroll-padding-left: 8rem;
.snap-pt-40
scroll-padding-top: 10rem;
.snap-pr-40
scroll-padding-right: 10rem;
.snap-pb-40
scroll-padding-bottom: 10rem;
.snap-pl-40
scroll-padding-left: 10rem;
.snap-pt-48
scroll-padding-top: 12rem;
.snap-pr-48
scroll-padding-right: 12rem;
.snap-pb-48
scroll-padding-bottom: 12rem;
.snap-pl-48
scroll-padding-left: 12rem;
.snap-pt-56
scroll-padding-top: 14rem;
.snap-pr-56
scroll-padding-right: 14rem;
.snap-pb-56
scroll-padding-bottom: 14rem;
.snap-pl-56
scroll-padding-left: 14rem;
.snap-pt-64
scroll-padding-top: 16rem;
.snap-pr-64
scroll-padding-right: 16rem;
.snap-pb-64
scroll-padding-bottom: 16rem;
.snap-pl-64
scroll-padding-left: 16rem;
.snap-pt-px
scroll-padding-top: 1px;
.snap-pr-px
scroll-padding-right: 1px;
.snap-pb-px
scroll-padding-bottom: 1px;
.snap-pl-px
scroll-padding-left: 1px ;
The default values are inherited from your theme's spacing values, negative values included, just like [`padding`](https://tailwindcss.com/docs/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](https://caniuse.com/#feat=css-variables). If you have to support IE11, please override the `scroll-snap-type` utilities.