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 --devAfter 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')],
};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.
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.
Utilities for the scroll-snap-type property.
| Class | Property |
|---|---|
.no-snap |
.scroll-snap-type: none; |
.snap |
.scroll-snap-type: var(--scroll-snap-direction) var(--scroll-snap-constraint) |
.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.
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.
Utilities for the 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.
Also like margin, you can override them your Tailwind theme configuration under the scrollMargin key.
Utilities for the 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.
Also like padding, you can override them your Tailwind theme configuration under the scrollPadding key.
Please note that IE11 doesn't support CSS custom properties. If you have to support IE11, please override the scroll-snap-type utilities.