Repository: innocenzi/tailwindcss-scroll-snap
Branch: main
Commit: 6e681eeb9bf5
Files: 24
Total size: 115.6 KB

Directory structure:
gitextract_ga78yygw/

├── .github/
│   └── workflows/
│       └── main.yaml
├── .gitignore
├── .npmignore
├── README.md
├── jest.config.js
├── package.json
├── src/
│   ├── factories/
│   │   ├── createPlugin.ts
│   │   └── createSpacingPlugin.ts
│   ├── index.ts
│   ├── plugin.ts
│   ├── plugins/
│   │   ├── align.ts
│   │   ├── margin.ts
│   │   ├── padding.ts
│   │   ├── stop.ts
│   │   └── type.ts
│   └── utils/
│       ├── negateValue.ts
│       └── negative.ts
├── test/
│   ├── bench/
│   │   ├── scroll-snap.css
│   │   ├── snap-margins.css
│   │   └── snap-paddings.css
│   ├── generateCss.ts
│   ├── plugins.test.ts
│   └── tailwind.test.ts
└── tsconfig.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .github/workflows/main.yaml
================================================
name: CI

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node: [12.x]

      fail-fast: true

    steps:
      - uses: actions/checkout@v2

      - name: Use Node ${{  matrix.node }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node }}

      - name: Install dependencies
        run: yarn install

      - name: Perform tests
        run: yarn jest


================================================
FILE: .gitignore
================================================
node_modules/
dist/
.yarn-error.log


================================================
FILE: .npmignore
================================================
src/
test/


================================================
FILE: README.md
================================================
<p align="center">
  <h2 align="center">Notice</h2>
  <p align="center">
	<b>This plugin is now implemented in Tailwind JIT core and won't be updated anymore.</b>
  </p>
</p>


&nbsp;
&nbsp;
&nbsp;

---

&nbsp;
&nbsp;
&nbsp;

<p align="center">
  <h1 align="center">Scroll Snap</h1>
  <p align="center">
    <a href="https://github.com/innocenzi/tailwindcss-scroll-snap/releases">
      <img alt="GitHub release (latest SemVer including pre-releases)" src="https://img.shields.io/github/v/release/innocenzi/tailwindcss-scroll-snap?include_prereleases&style=flat-square">
    </a>
    &nbsp;
    <a href="https://npmjs.com/package/tailwindcss-scroll-snap">
      <img alt="npm" src="https://img.shields.io/npm/v/tailwindcss-scroll-snap?style=flat-square">
    </a>
    &nbsp;
    <a href="https://npmjs.com/package/tailwindcss-scroll-snap">
      <img alt="npm" src="https://img.shields.io/npm/dt/tailwindcss-scroll-snap?style=flat-square&color=blue">
    </a>
  </p>
</p>

# 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
<section class="snap snap-y snap-mandatory">
	<!-- ... -->
</section>
```

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.

<details>
<summary>See the default list.</summary>
<table>
  <thead>
    <tr>
      <th>Class</th>
      <th>Property</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>.snap-m-0</code></td>
      <td><code>scroll-margin: 0;</code></td>
    </tr>
    <tr>
      <td><code>.snap-m-1</code></td>
      <td><code>scroll-margin: 0.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-m-2</code></td>
      <td><code>scroll-margin: 0.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-m-3</code></td>
      <td><code>scroll-margin: 0.75rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-m-4</code></td>
      <td><code>scroll-margin: 1rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-m-5</code></td>
      <td><code>scroll-margin: 1.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-m-6</code></td>
      <td><code>scroll-margin: 1.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-m-8</code></td>
      <td><code>scroll-margin: 2rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-m-10</code></td>
      <td><code>scroll-margin: 2.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-m-12</code></td>
      <td><code>scroll-margin: 3rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-m-16</code></td>
      <td><code>scroll-margin: 4rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-m-20</code></td>
      <td><code>scroll-margin: 5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-m-24</code></td>
      <td><code>scroll-margin: 6rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-m-32</code></td>
      <td><code>scroll-margin: 8rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-m-40</code></td>
      <td><code>scroll-margin: 10rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-m-48</code></td>
      <td><code>scroll-margin: 12rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-m-56</code></td>
      <td><code>scroll-margin: 14rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-m-64</code></td>
      <td><code>scroll-margin: 16rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-m-auto</code></td>
      <td><code>scroll-margin: auto;</code></td>
    </tr>
    <tr>
      <td><code>.snap-m-px</code></td>
      <td><code>scroll-margin: 1px;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-m-1</code></td>
      <td><code>scroll-margin: -0.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-m-2</code></td>
      <td><code>scroll-margin: -0.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-m-3</code></td>
      <td><code>scroll-margin: -0.75rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-m-4</code></td>
      <td><code>scroll-margin: -1rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-m-5</code></td>
      <td><code>scroll-margin: -1.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-m-6</code></td>
      <td><code>scroll-margin: -1.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-m-8</code></td>
      <td><code>scroll-margin: -2rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-m-10</code></td>
      <td><code>scroll-margin: -2.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-m-12</code></td>
      <td><code>scroll-margin: -3rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-m-16</code></td>
      <td><code>scroll-margin: -4rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-m-20</code></td>
      <td><code>scroll-margin: -5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-m-24</code></td>
      <td><code>scroll-margin: -6rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-m-32</code></td>
      <td><code>scroll-margin: -8rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-m-40</code></td>
      <td><code>scroll-margin: -10rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-m-48</code></td>
      <td><code>scroll-margin: -12rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-m-56</code></td>
      <td><code>scroll-margin: -14rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-m-64</code></td>
      <td><code>scroll-margin: -16rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-m-px</code></td>
      <td><code>scroll-margin: -1px;</code></td>
    </tr>
    <tr>
      <td><code>.snap-my-0</code></td>
      <td><code>scroll-margin-top: 0; scroll-margin-bottom: 0;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mx-0</code></td>
      <td><code>scroll-margin-left: 0; scroll-margin-right: 0;</code></td>
    </tr>
    <tr>
      <td><code>.snap-my-1</code></td>
      <td><code>scroll-margin-top: 0.25rem; scroll-margin-bottom: 0.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mx-1</code></td>
      <td><code>scroll-margin-left: 0.25rem; scroll-margin-right: 0.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-my-2</code></td>
      <td><code>scroll-margin-top: 0.5rem; scroll-margin-bottom: 0.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mx-2</code></td>
      <td><code>scroll-margin-left: 0.5rem; scroll-margin-right: 0.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-my-3</code></td>
      <td><code>scroll-margin-top: 0.75rem; scroll-margin-bottom: 0.75rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mx-3</code></td>
      <td><code>scroll-margin-left: 0.75rem; scroll-margin-right: 0.75rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-my-4</code></td>
      <td><code>scroll-margin-top: 1rem; scroll-margin-bottom: 1rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mx-4</code></td>
      <td><code>scroll-margin-left: 1rem; scroll-margin-right: 1rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-my-5</code></td>
      <td><code>scroll-margin-top: 1.25rem; scroll-margin-bottom: 1.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mx-5</code></td>
      <td><code>scroll-margin-left: 1.25rem; scroll-margin-right: 1.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-my-6</code></td>
      <td><code>scroll-margin-top: 1.5rem; scroll-margin-bottom: 1.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mx-6</code></td>
      <td><code>scroll-margin-left: 1.5rem; scroll-margin-right: 1.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-my-8</code></td>
      <td><code>scroll-margin-top: 2rem; scroll-margin-bottom: 2rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mx-8</code></td>
      <td><code>scroll-margin-left: 2rem; scroll-margin-right: 2rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-my-10</code></td>
      <td><code>scroll-margin-top: 2.5rem; scroll-margin-bottom: 2.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mx-10</code></td>
      <td><code>scroll-margin-left: 2.5rem; scroll-margin-right: 2.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-my-12</code></td>
      <td><code>scroll-margin-top: 3rem; scroll-margin-bottom: 3rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mx-12</code></td>
      <td><code>scroll-margin-left: 3rem; scroll-margin-right: 3rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-my-16</code></td>
      <td><code>scroll-margin-top: 4rem; scroll-margin-bottom: 4rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mx-16</code></td>
      <td><code>scroll-margin-left: 4rem; scroll-margin-right: 4rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-my-20</code></td>
      <td><code>scroll-margin-top: 5rem; scroll-margin-bottom: 5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mx-20</code></td>
      <td><code>scroll-margin-left: 5rem; scroll-margin-right: 5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-my-24</code></td>
      <td><code>scroll-margin-top: 6rem; scroll-margin-bottom: 6rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mx-24</code></td>
      <td><code>scroll-margin-left: 6rem; scroll-margin-right: 6rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-my-32</code></td>
      <td><code>scroll-margin-top: 8rem; scroll-margin-bottom: 8rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mx-32</code></td>
      <td><code>scroll-margin-left: 8rem; scroll-margin-right: 8rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-my-40</code></td>
      <td><code>scroll-margin-top: 10rem; scroll-margin-bottom: 10rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mx-40</code></td>
      <td><code>scroll-margin-left: 10rem; scroll-margin-right: 10rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-my-48</code></td>
      <td><code>scroll-margin-top: 12rem; scroll-margin-bottom: 12rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mx-48</code></td>
      <td><code>scroll-margin-left: 12rem; scroll-margin-right: 12rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-my-56</code></td>
      <td><code>scroll-margin-top: 14rem; scroll-margin-bottom: 14rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mx-56</code></td>
      <td><code>scroll-margin-left: 14rem; scroll-margin-right: 14rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-my-64</code></td>
      <td><code>scroll-margin-top: 16rem; scroll-margin-bottom: 16rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mx-64</code></td>
      <td><code>scroll-margin-left: 16rem; scroll-margin-right: 16rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-my-auto</code></td>
      <td><code>scroll-margin-top: auto; scroll-margin-bottom: auto;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mx-auto</code></td>
      <td><code>scroll-margin-left: auto; scroll-margin-right: auto;</code></td>
    </tr>
    <tr>
      <td><code>.snap-my-px</code></td>
      <td><code>scroll-margin-top: 1px; scroll-margin-bottom: 1px;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mx-px</code></td>
      <td><code>scroll-margin-left: 1px; scroll-margin-right: 1px;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-my-1</code></td>
      <td><code>scroll-margin-top: -0.25rem; scroll-margin-bottom: -0.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mx-1</code></td>
      <td><code>scroll-margin-left: -0.25rem; scroll-margin-right: -0.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-my-2</code></td>
      <td><code>scroll-margin-top: -0.5rem; scroll-margin-bottom: -0.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mx-2</code></td>
      <td><code>scroll-margin-left: -0.5rem; scroll-margin-right: -0.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-my-3</code></td>
      <td><code>scroll-margin-top: -0.75rem; scroll-margin-bottom: -0.75rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mx-3</code></td>
      <td><code>scroll-margin-left: -0.75rem; scroll-margin-right: -0.75rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-my-4</code></td>
      <td><code>scroll-margin-top: -1rem; scroll-margin-bottom: -1rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mx-4</code></td>
      <td><code>scroll-margin-left: -1rem; scroll-margin-right: -1rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-my-5</code></td>
      <td><code>scroll-margin-top: -1.25rem; scroll-margin-bottom: -1.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mx-5</code></td>
      <td><code>scroll-margin-left: -1.25rem; scroll-margin-right: -1.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-my-6</code></td>
      <td><code>scroll-margin-top: -1.5rem; scroll-margin-bottom: -1.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mx-6</code></td>
      <td><code>scroll-margin-left: -1.5rem; scroll-margin-right: -1.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-my-8</code></td>
      <td><code>scroll-margin-top: -2rem; scroll-margin-bottom: -2rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mx-8</code></td>
      <td><code>scroll-margin-left: -2rem; scroll-margin-right: -2rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-my-10</code></td>
      <td><code>scroll-margin-top: -2.5rem; scroll-margin-bottom: -2.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mx-10</code></td>
      <td><code>scroll-margin-left: -2.5rem; scroll-margin-right: -2.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-my-12</code></td>
      <td><code>scroll-margin-top: -3rem; scroll-margin-bottom: -3rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mx-12</code></td>
      <td><code>scroll-margin-left: -3rem; scroll-margin-right: -3rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-my-16</code></td>
      <td><code>scroll-margin-top: -4rem; scroll-margin-bottom: -4rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mx-16</code></td>
      <td><code>scroll-margin-left: -4rem; scroll-margin-right: -4rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-my-20</code></td>
      <td><code>scroll-margin-top: -5rem; scroll-margin-bottom: -5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mx-20</code></td>
      <td><code>scroll-margin-left: -5rem; scroll-margin-right: -5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-my-24</code></td>
      <td><code>scroll-margin-top: -6rem; scroll-margin-bottom: -6rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mx-24</code></td>
      <td><code>scroll-margin-left: -6rem; scroll-margin-right: -6rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-my-32</code></td>
      <td><code>scroll-margin-top: -8rem; scroll-margin-bottom: -8rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mx-32</code></td>
      <td><code>scroll-margin-left: -8rem; scroll-margin-right: -8rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-my-40</code></td>
      <td><code>scroll-margin-top: -10rem; scroll-margin-bottom: -10rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mx-40</code></td>
      <td><code>scroll-margin-left: -10rem; scroll-margin-right: -10rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-my-48</code></td>
      <td><code>scroll-margin-top: -12rem; scroll-margin-bottom: -12rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mx-48</code></td>
      <td><code>scroll-margin-left: -12rem; scroll-margin-right: -12rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-my-56</code></td>
      <td><code>scroll-margin-top: -14rem; scroll-margin-bottom: -14rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mx-56</code></td>
      <td><code>scroll-margin-left: -14rem; scroll-margin-right: -14rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-my-64</code></td>
      <td><code>scroll-margin-top: -16rem; scroll-margin-bottom: -16rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mx-64</code></td>
      <td><code>scroll-margin-left: -16rem; scroll-margin-right: -16rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-my-px</code></td>
      <td><code>scroll-margin-top: -1px; scroll-margin-bottom: -1px;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mx-px</code></td>
      <td><code>scroll-margin-left: -1px; scroll-margin-right: -1px;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mt-0</code></td>
      <td><code>scroll-margin-top: 0;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mr-0</code></td>
      <td><code>scroll-margin-right: 0;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mb-0</code></td>
      <td><code>scroll-margin-bottom: 0;</code></td>
    </tr>
    <tr>
      <td><code>.snap-ml-0</code></td>
      <td><code>scroll-margin-left: 0;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mt-1</code></td>
      <td><code>scroll-margin-top: 0.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mr-1</code></td>
      <td><code>scroll-margin-right: 0.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mb-1</code></td>
      <td><code>scroll-margin-bottom: 0.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-ml-1</code></td>
      <td><code>scroll-margin-left: 0.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mt-2</code></td>
      <td><code>scroll-margin-top: 0.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mr-2</code></td>
      <td><code>scroll-margin-right: 0.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mb-2</code></td>
      <td><code>scroll-margin-bottom: 0.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-ml-2</code></td>
      <td><code>scroll-margin-left: 0.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mt-3</code></td>
      <td><code>scroll-margin-top: 0.75rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mr-3</code></td>
      <td><code>scroll-margin-right: 0.75rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mb-3</code></td>
      <td><code>scroll-margin-bottom: 0.75rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-ml-3</code></td>
      <td><code>scroll-margin-left: 0.75rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mt-4</code></td>
      <td><code>scroll-margin-top: 1rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mr-4</code></td>
      <td><code>scroll-margin-right: 1rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mb-4</code></td>
      <td><code>scroll-margin-bottom: 1rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-ml-4</code></td>
      <td><code>scroll-margin-left: 1rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mt-5</code></td>
      <td><code>scroll-margin-top: 1.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mr-5</code></td>
      <td><code>scroll-margin-right: 1.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mb-5</code></td>
      <td><code>scroll-margin-bottom: 1.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-ml-5</code></td>
      <td><code>scroll-margin-left: 1.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mt-6</code></td>
      <td><code>scroll-margin-top: 1.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mr-6</code></td>
      <td><code>scroll-margin-right: 1.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mb-6</code></td>
      <td><code>scroll-margin-bottom: 1.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-ml-6</code></td>
      <td><code>scroll-margin-left: 1.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mt-8</code></td>
      <td><code>scroll-margin-top: 2rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mr-8</code></td>
      <td><code>scroll-margin-right: 2rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mb-8</code></td>
      <td><code>scroll-margin-bottom: 2rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-ml-8</code></td>
      <td><code>scroll-margin-left: 2rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mt-10</code></td>
      <td><code>scroll-margin-top: 2.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mr-10</code></td>
      <td><code>scroll-margin-right: 2.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mb-10</code></td>
      <td><code>scroll-margin-bottom: 2.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-ml-10</code></td>
      <td><code>scroll-margin-left: 2.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mt-12</code></td>
      <td><code>scroll-margin-top: 3rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mr-12</code></td>
      <td><code>scroll-margin-right: 3rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mb-12</code></td>
      <td><code>scroll-margin-bottom: 3rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-ml-12</code></td>
      <td><code>scroll-margin-left: 3rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mt-16</code></td>
      <td><code>scroll-margin-top: 4rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mr-16</code></td>
      <td><code>scroll-margin-right: 4rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mb-16</code></td>
      <td><code>scroll-margin-bottom: 4rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-ml-16</code></td>
      <td><code>scroll-margin-left: 4rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mt-20</code></td>
      <td><code>scroll-margin-top: 5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mr-20</code></td>
      <td><code>scroll-margin-right: 5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mb-20</code></td>
      <td><code>scroll-margin-bottom: 5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-ml-20</code></td>
      <td><code>scroll-margin-left: 5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mt-24</code></td>
      <td><code>scroll-margin-top: 6rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mr-24</code></td>
      <td><code>scroll-margin-right: 6rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mb-24</code></td>
      <td><code>scroll-margin-bottom: 6rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-ml-24</code></td>
      <td><code>scroll-margin-left: 6rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mt-32</code></td>
      <td><code>scroll-margin-top: 8rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mr-32</code></td>
      <td><code>scroll-margin-right: 8rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mb-32</code></td>
      <td><code>scroll-margin-bottom: 8rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-ml-32</code></td>
      <td><code>scroll-margin-left: 8rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mt-40</code></td>
      <td><code>scroll-margin-top: 10rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mr-40</code></td>
      <td><code>scroll-margin-right: 10rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mb-40</code></td>
      <td><code>scroll-margin-bottom: 10rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-ml-40</code></td>
      <td><code>scroll-margin-left: 10rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mt-48</code></td>
      <td><code>scroll-margin-top: 12rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mr-48</code></td>
      <td><code>scroll-margin-right: 12rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mb-48</code></td>
      <td><code>scroll-margin-bottom: 12rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-ml-48</code></td>
      <td><code>scroll-margin-left: 12rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mt-56</code></td>
      <td><code>scroll-margin-top: 14rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mr-56</code></td>
      <td><code>scroll-margin-right: 14rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mb-56</code></td>
      <td><code>scroll-margin-bottom: 14rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-ml-56</code></td>
      <td><code>scroll-margin-left: 14rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mt-64</code></td>
      <td><code>scroll-margin-top: 16rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mr-64</code></td>
      <td><code>scroll-margin-right: 16rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mb-64</code></td>
      <td><code>scroll-margin-bottom: 16rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-ml-64</code></td>
      <td><code>scroll-margin-left: 16rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mt-auto</code></td>
      <td><code>scroll-margin-top: auto;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mr-auto</code></td>
      <td><code>scroll-margin-right: auto;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mb-auto</code></td>
      <td><code>scroll-margin-bottom: auto;</code></td>
    </tr>
    <tr>
      <td><code>.snap-ml-auto</code></td>
      <td><code>scroll-margin-left: auto;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mt-px</code></td>
      <td><code>scroll-margin-top: 1px;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mr-px</code></td>
      <td><code>scroll-margin-right: 1px;</code></td>
    </tr>
    <tr>
      <td><code>.snap-mb-px</code></td>
      <td><code>scroll-margin-bottom: 1px;</code></td>
    </tr>
    <tr>
      <td><code>.snap-ml-px</code></td>
      <td><code>scroll-margin-left: 1px;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mt-1</code></td>
      <td><code>scroll-margin-top: -0.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mr-1</code></td>
      <td><code>scroll-margin-right: -0.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mb-1</code></td>
      <td><code>scroll-margin-bottom: -0.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-ml-1</code></td>
      <td><code>scroll-margin-left: -0.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mt-2</code></td>
      <td><code>scroll-margin-top: -0.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mr-2</code></td>
      <td><code>scroll-margin-right: -0.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mb-2</code></td>
      <td><code>scroll-margin-bottom: -0.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-ml-2</code></td>
      <td><code>scroll-margin-left: -0.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mt-3</code></td>
      <td><code>scroll-margin-top: -0.75rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mr-3</code></td>
      <td><code>scroll-margin-right: -0.75rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mb-3</code></td>
      <td><code>scroll-margin-bottom: -0.75rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-ml-3</code></td>
      <td><code>scroll-margin-left: -0.75rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mt-4</code></td>
      <td><code>scroll-margin-top: -1rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mr-4</code></td>
      <td><code>scroll-margin-right: -1rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mb-4</code></td>
      <td><code>scroll-margin-bottom: -1rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-ml-4</code></td>
      <td><code>scroll-margin-left: -1rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mt-5</code></td>
      <td><code>scroll-margin-top: -1.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mr-5</code></td>
      <td><code>scroll-margin-right: -1.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mb-5</code></td>
      <td><code>scroll-margin-bottom: -1.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-ml-5</code></td>
      <td><code>scroll-margin-left: -1.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mt-6</code></td>
      <td><code>scroll-margin-top: -1.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mr-6</code></td>
      <td><code>scroll-margin-right: -1.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mb-6</code></td>
      <td><code>scroll-margin-bottom: -1.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-ml-6</code></td>
      <td><code>scroll-margin-left: -1.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mt-8</code></td>
      <td><code>scroll-margin-top: -2rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mr-8</code></td>
      <td><code>scroll-margin-right: -2rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mb-8</code></td>
      <td><code>scroll-margin-bottom: -2rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-ml-8</code></td>
      <td><code>scroll-margin-left: -2rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mt-10</code></td>
      <td><code>scroll-margin-top: -2.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mr-10</code></td>
      <td><code>scroll-margin-right: -2.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mb-10</code></td>
      <td><code>scroll-margin-bottom: -2.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-ml-10</code></td>
      <td><code>scroll-margin-left: -2.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mt-12</code></td>
      <td><code>scroll-margin-top: -3rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mr-12</code></td>
      <td><code>scroll-margin-right: -3rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mb-12</code></td>
      <td><code>scroll-margin-bottom: -3rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-ml-12</code></td>
      <td><code>scroll-margin-left: -3rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mt-16</code></td>
      <td><code>scroll-margin-top: -4rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mr-16</code></td>
      <td><code>scroll-margin-right: -4rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mb-16</code></td>
      <td><code>scroll-margin-bottom: -4rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-ml-16</code></td>
      <td><code>scroll-margin-left: -4rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mt-20</code></td>
      <td><code>scroll-margin-top: -5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mr-20</code></td>
      <td><code>scroll-margin-right: -5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mb-20</code></td>
      <td><code>scroll-margin-bottom: -5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-ml-20</code></td>
      <td><code>scroll-margin-left: -5rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mt-24</code></td>
      <td><code>scroll-margin-top: -6rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mr-24</code></td>
      <td><code>scroll-margin-right: -6rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mb-24</code></td>
      <td><code>scroll-margin-bottom: -6rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-ml-24</code></td>
      <td><code>scroll-margin-left: -6rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mt-32</code></td>
      <td><code>scroll-margin-top: -8rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mr-32</code></td>
      <td><code>scroll-margin-right: -8rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mb-32</code></td>
      <td><code>scroll-margin-bottom: -8rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-ml-32</code></td>
      <td><code>scroll-margin-left: -8rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mt-40</code></td>
      <td><code>scroll-margin-top: -10rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mr-40</code></td>
      <td><code>scroll-margin-right: -10rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mb-40</code></td>
      <td><code>scroll-margin-bottom: -10rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-ml-40</code></td>
      <td><code>scroll-margin-left: -10rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mt-48</code></td>
      <td><code>scroll-margin-top: -12rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mr-48</code></td>
      <td><code>scroll-margin-right: -12rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mb-48</code></td>
      <td><code>scroll-margin-bottom: -12rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-ml-48</code></td>
      <td><code>scroll-margin-left: -12rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mt-56</code></td>
      <td><code>scroll-margin-top: -14rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mr-56</code></td>
      <td><code>scroll-margin-right: -14rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mb-56</code></td>
      <td><code>scroll-margin-bottom: -14rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-ml-56</code></td>
      <td><code>scroll-margin-left: -14rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mt-64</code></td>
      <td><code>scroll-margin-top: -16rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mr-64</code></td>
      <td><code>scroll-margin-right: -16rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mb-64</code></td>
      <td><code>scroll-margin-bottom: -16rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-ml-64</code></td>
      <td><code>scroll-margin-left: -16rem;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mt-px</code></td>
      <td><code>scroll-margin-top: -1px;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mr-px</code></td>
      <td><code>scroll-margin-right: -1px;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-mb-px</code></td>
      <td><code>scroll-margin-bottom: -1px;</code></td>
    </tr>
    <tr>
      <td><code>.-snap-ml-px</code></td>
      <td><code>scroll-margin-left: -1px ;</code></td>
    </tr>
  </tbody>
</table>
</details>

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.

<details>
<summary>See the default list.</summary>
<table>
  <thead>
    <tr>
      <th>Class</th>
      <th>Property</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>.snap-p-0</code></td>
      <td><code>scroll-padding: 0;</code></td>
    </tr>
    <tr>
      <td><code>.snap-p-1</code></td>
      <td><code>scroll-padding: 0.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-p-2</code></td>
      <td><code>scroll-padding: 0.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-p-3</code></td>
      <td><code>scroll-padding: 0.75rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-p-4</code></td>
      <td><code>scroll-padding: 1rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-p-5</code></td>
      <td><code>scroll-padding: 1.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-p-6</code></td>
      <td><code>scroll-padding: 1.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-p-8</code></td>
      <td><code>scroll-padding: 2rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-p-10</code></td>
      <td><code>scroll-padding: 2.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-p-12</code></td>
      <td><code>scroll-padding: 3rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-p-16</code></td>
      <td><code>scroll-padding: 4rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-p-20</code></td>
      <td><code>scroll-padding: 5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-p-24</code></td>
      <td><code>scroll-padding: 6rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-p-32</code></td>
      <td><code>scroll-padding: 8rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-p-40</code></td>
      <td><code>scroll-padding: 10rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-p-48</code></td>
      <td><code>scroll-padding: 12rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-p-56</code></td>
      <td><code>scroll-padding: 14rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-p-64</code></td>
      <td><code>scroll-padding: 16rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-p-px</code></td>
      <td><code>scroll-padding: 1px;</code></td>
    </tr>
    <tr>
      <td><code>.snap-py-0</code></td>
      <td><code>scroll-padding-top: 0; scroll-padding-bottom: 0;</code></td>
    </tr>
    <tr>
      <td><code>.snap-px-0</code></td>
      <td><code>scroll-padding-left: 0; scroll-padding-right: 0;</code></td>
    </tr>
    <tr>
      <td><code>.snap-py-1</code></td>
      <td><code>scroll-padding-top: 0.25rem; scroll-padding-bottom: 0.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-px-1</code></td>
      <td><code>scroll-padding-left: 0.25rem; scroll-padding-right: 0.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-py-2</code></td>
      <td><code>scroll-padding-top: 0.5rem; scroll-padding-bottom: 0.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-px-2</code></td>
      <td><code>scroll-padding-left: 0.5rem; scroll-padding-right: 0.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-py-3</code></td>
      <td><code>scroll-padding-top: 0.75rem; scroll-padding-bottom: 0.75rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-px-3</code></td>
      <td><code>scroll-padding-left: 0.75rem; scroll-padding-right: 0.75rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-py-4</code></td>
      <td><code>scroll-padding-top: 1rem; scroll-padding-bottom: 1rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-px-4</code></td>
      <td><code>scroll-padding-left: 1rem; scroll-padding-right: 1rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-py-5</code></td>
      <td><code>scroll-padding-top: 1.25rem; scroll-padding-bottom: 1.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-px-5</code></td>
      <td><code>scroll-padding-left: 1.25rem; scroll-padding-right: 1.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-py-6</code></td>
      <td><code>scroll-padding-top: 1.5rem; scroll-padding-bottom: 1.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-px-6</code></td>
      <td><code>scroll-padding-left: 1.5rem; scroll-padding-right: 1.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-py-8</code></td>
      <td><code>scroll-padding-top: 2rem; scroll-padding-bottom: 2rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-px-8</code></td>
      <td><code>scroll-padding-left: 2rem; scroll-padding-right: 2rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-py-10</code></td>
      <td><code>scroll-padding-top: 2.5rem; scroll-padding-bottom: 2.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-px-10</code></td>
      <td><code>scroll-padding-left: 2.5rem; scroll-padding-right: 2.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-py-12</code></td>
      <td><code>scroll-padding-top: 3rem; scroll-padding-bottom: 3rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-px-12</code></td>
      <td><code>scroll-padding-left: 3rem; scroll-padding-right: 3rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-py-16</code></td>
      <td><code>scroll-padding-top: 4rem; scroll-padding-bottom: 4rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-px-16</code></td>
      <td><code>scroll-padding-left: 4rem; scroll-padding-right: 4rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-py-20</code></td>
      <td><code>scroll-padding-top: 5rem; scroll-padding-bottom: 5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-px-20</code></td>
      <td><code>scroll-padding-left: 5rem; scroll-padding-right: 5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-py-24</code></td>
      <td><code>scroll-padding-top: 6rem; scroll-padding-bottom: 6rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-px-24</code></td>
      <td><code>scroll-padding-left: 6rem; scroll-padding-right: 6rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-py-32</code></td>
      <td><code>scroll-padding-top: 8rem; scroll-padding-bottom: 8rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-px-32</code></td>
      <td><code>scroll-padding-left: 8rem; scroll-padding-right: 8rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-py-40</code></td>
      <td><code>scroll-padding-top: 10rem; scroll-padding-bottom: 10rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-px-40</code></td>
      <td><code>scroll-padding-left: 10rem; scroll-padding-right: 10rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-py-48</code></td>
      <td><code>scroll-padding-top: 12rem; scroll-padding-bottom: 12rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-px-48</code></td>
      <td><code>scroll-padding-left: 12rem; scroll-padding-right: 12rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-py-56</code></td>
      <td><code>scroll-padding-top: 14rem; scroll-padding-bottom: 14rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-px-56</code></td>
      <td><code>scroll-padding-left: 14rem; scroll-padding-right: 14rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-py-64</code></td>
      <td><code>scroll-padding-top: 16rem; scroll-padding-bottom: 16rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-px-64</code></td>
      <td><code>scroll-padding-left: 16rem; scroll-padding-right: 16rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-py-px</code></td>
      <td><code>scroll-padding-top: 1px; scroll-padding-bottom: 1px;</code></td>
    </tr>
    <tr>
      <td><code>.snap-px-px</code></td>
      <td><code>scroll-padding-left: 1px; scroll-padding-right: 1px;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pt-0</code></td>
      <td><code>scroll-padding-top: 0;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pr-0</code></td>
      <td><code>scroll-padding-right: 0;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pb-0</code></td>
      <td><code>scroll-padding-bottom: 0;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pl-0</code></td>
      <td><code>scroll-padding-left: 0;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pt-1</code></td>
      <td><code>scroll-padding-top: 0.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pr-1</code></td>
      <td><code>scroll-padding-right: 0.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pb-1</code></td>
      <td><code>scroll-padding-bottom: 0.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pl-1</code></td>
      <td><code>scroll-padding-left: 0.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pt-2</code></td>
      <td><code>scroll-padding-top: 0.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pr-2</code></td>
      <td><code>scroll-padding-right: 0.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pb-2</code></td>
      <td><code>scroll-padding-bottom: 0.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pl-2</code></td>
      <td><code>scroll-padding-left: 0.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pt-3</code></td>
      <td><code>scroll-padding-top: 0.75rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pr-3</code></td>
      <td><code>scroll-padding-right: 0.75rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pb-3</code></td>
      <td><code>scroll-padding-bottom: 0.75rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pl-3</code></td>
      <td><code>scroll-padding-left: 0.75rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pt-4</code></td>
      <td><code>scroll-padding-top: 1rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pr-4</code></td>
      <td><code>scroll-padding-right: 1rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pb-4</code></td>
      <td><code>scroll-padding-bottom: 1rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pl-4</code></td>
      <td><code>scroll-padding-left: 1rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pt-5</code></td>
      <td><code>scroll-padding-top: 1.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pr-5</code></td>
      <td><code>scroll-padding-right: 1.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pb-5</code></td>
      <td><code>scroll-padding-bottom: 1.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pl-5</code></td>
      <td><code>scroll-padding-left: 1.25rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pt-6</code></td>
      <td><code>scroll-padding-top: 1.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pr-6</code></td>
      <td><code>scroll-padding-right: 1.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pb-6</code></td>
      <td><code>scroll-padding-bottom: 1.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pl-6</code></td>
      <td><code>scroll-padding-left: 1.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pt-8</code></td>
      <td><code>scroll-padding-top: 2rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pr-8</code></td>
      <td><code>scroll-padding-right: 2rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pb-8</code></td>
      <td><code>scroll-padding-bottom: 2rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pl-8</code></td>
      <td><code>scroll-padding-left: 2rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pt-10</code></td>
      <td><code>scroll-padding-top: 2.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pr-10</code></td>
      <td><code>scroll-padding-right: 2.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pb-10</code></td>
      <td><code>scroll-padding-bottom: 2.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pl-10</code></td>
      <td><code>scroll-padding-left: 2.5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pt-12</code></td>
      <td><code>scroll-padding-top: 3rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pr-12</code></td>
      <td><code>scroll-padding-right: 3rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pb-12</code></td>
      <td><code>scroll-padding-bottom: 3rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pl-12</code></td>
      <td><code>scroll-padding-left: 3rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pt-16</code></td>
      <td><code>scroll-padding-top: 4rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pr-16</code></td>
      <td><code>scroll-padding-right: 4rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pb-16</code></td>
      <td><code>scroll-padding-bottom: 4rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pl-16</code></td>
      <td><code>scroll-padding-left: 4rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pt-20</code></td>
      <td><code>scroll-padding-top: 5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pr-20</code></td>
      <td><code>scroll-padding-right: 5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pb-20</code></td>
      <td><code>scroll-padding-bottom: 5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pl-20</code></td>
      <td><code>scroll-padding-left: 5rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pt-24</code></td>
      <td><code>scroll-padding-top: 6rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pr-24</code></td>
      <td><code>scroll-padding-right: 6rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pb-24</code></td>
      <td><code>scroll-padding-bottom: 6rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pl-24</code></td>
      <td><code>scroll-padding-left: 6rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pt-32</code></td>
      <td><code>scroll-padding-top: 8rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pr-32</code></td>
      <td><code>scroll-padding-right: 8rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pb-32</code></td>
      <td><code>scroll-padding-bottom: 8rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pl-32</code></td>
      <td><code>scroll-padding-left: 8rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pt-40</code></td>
      <td><code>scroll-padding-top: 10rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pr-40</code></td>
      <td><code>scroll-padding-right: 10rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pb-40</code></td>
      <td><code>scroll-padding-bottom: 10rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pl-40</code></td>
      <td><code>scroll-padding-left: 10rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pt-48</code></td>
      <td><code>scroll-padding-top: 12rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pr-48</code></td>
      <td><code>scroll-padding-right: 12rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pb-48</code></td>
      <td><code>scroll-padding-bottom: 12rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pl-48</code></td>
      <td><code>scroll-padding-left: 12rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pt-56</code></td>
      <td><code>scroll-padding-top: 14rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pr-56</code></td>
      <td><code>scroll-padding-right: 14rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pb-56</code></td>
      <td><code>scroll-padding-bottom: 14rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pl-56</code></td>
      <td><code>scroll-padding-left: 14rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pt-64</code></td>
      <td><code>scroll-padding-top: 16rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pr-64</code></td>
      <td><code>scroll-padding-right: 16rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pb-64</code></td>
      <td><code>scroll-padding-bottom: 16rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pl-64</code></td>
      <td><code>scroll-padding-left: 16rem;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pt-px</code></td>
      <td><code>scroll-padding-top: 1px;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pr-px</code></td>
      <td><code>scroll-padding-right: 1px;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pb-px</code></td>
      <td><code>scroll-padding-bottom: 1px;</code></td>
    </tr>
    <tr>
      <td><code>.snap-pl-px</code></td>
      <td><code>scroll-padding-left: 1px ;</code></td>
    </tr>
  </tbody>
</table>

</details>

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.


================================================
FILE: jest.config.js
================================================
module.exports = {
	preset: 'ts-jest',
	testEnvironment: 'node',
	globals: {
		'ts-jest': {
			diagnostics: false,
		},
	},
};


================================================
FILE: package.json
================================================
{
	"name": "tailwindcss-scroll-snap",
	"version": "1.1.0",
	"description": "A Tailwind CSS plugin that adds `scroll-snap` utilities.",
	"main": "dist/index.js",
	"author": {
		"email": "enzo@innocenzi.dev",
		"name": "Enzo Innocenzi",
		"url": "https://innocenzi.dev"
	},
	"scripts": {
		"clean": "rm -rf dist",
		"build": "yarn run clean && tsc",
		"watch": "yarn run clean && tsc -w",
		"test": "jest test",
		"test:watch": "jest test --watch",
		"release": "yarn build && standard-version --skip.changelog"
	},
	"repository": {
		"type": "git",
		"url": "git+https://github.com/innocenzi/tailwindcss-scroll-snap.git"
	},
	"keywords": [
		"tailwindcss",
		"scroll-snap",
		"smooth-scroll"
	],
	"license": "MIT",
	"bugs": {
		"url": "https://github.com/innocenzi/tailwindcss-scroll-snap/issues"
	},
	"homepage": "https://github.com/innocenzi/tailwindcss-scroll-snap#readme",
	"devDependencies": {
		"@types/faker": "^4.1.6",
		"@types/jest": "^24.0.18",
		"@types/lodash": "^4.14.149",
		"@types/node": "^13.1.4",
		"babel-jest": "^24.9.0",
		"faker": "^4.1.0",
		"jest": "^24.9.0",
		"jest-matcher-css": "^1.1.0",
		"jest-mock-console": "^1.0.0",
		"postcss": "^7.0.18",
		"standard-version": "^8.0.0",
		"tailwindcss": "^1.6",
		"ts-jest": "^24.1.0",
		"typescript": "^3.7.0"
	},
	"dependencies": {
		"lodash": "^4.17.15",
		"reduce-css-calc": "^2.1.7"
	}
}


================================================
FILE: src/factories/createPlugin.ts
================================================
import _ from 'lodash';

/**
 * Add utilities to Tailwind.
 *
 * @export
 * @param {string} property The Tailwind config key, which will also be the CSS property. Should be in the CSS-in-JS format.
 * @param {*} config A map of class names => property values.
 *                   The property values can be a string tuple where the first value would be the property name,
 *                   and the second value the property value.
 * @param {TailwindPluginHelpers} helpers The Tailwind plugin helpers object.
 */
export default function (
	property: string,
	config: any,
	{ e, theme, variants, addUtilities }: any,
) {
	addUtilities(
		_.map(
			theme(property, config),
			(value: string | [string, string], name: string) => ({
				[`.${e(name)}`]: {
					[getPropertyName(property, value)]: getValue(value),
				},
			}),
		),
		variants(property, []),
	);
}

/**
 * Parses the property name from the value to detect tuples.
 *
 * @param {string} property
 * @param {(string | [string, string])} value
 * @returns
 */
function getPropertyName(property: string, value: string | [string, string]) {
	return Array.isArray(value) ? value[0] : property;
}

/**
 * Parses the actual value name from the value variable to detect tuples.
 *
 * @param {string} property
 * @param {(string | [string, string])} value
 * @returns
 */
function getValue(value: string | [string, string]) {
	return Array.isArray(value) ? value[1] : value;
}


================================================
FILE: src/factories/createSpacingPlugin.ts
================================================
import prefixNegativeModifiers from 'tailwindcss/lib/util/prefixNegativeModifiers';
import negative from '../utils/negative';
import _ from 'lodash';

/**
 * Available spacing types.
 * Exported as a type instead of enum for JavaScript convenience.
 *
 * @export
 * @type {SpacingType}
 */
export type SpacingType = 'margin' | 'padding';

/**
 * Available spacing directions.
 *
 * @export
 * @enum {number}
 */
export enum SpacingDirection {
	Top = 'top',
	Bottom = 'bottom',
	Left = 'left',
	Right = 'right',
	Vertical = 'y',
	Horizontal = 'x',
}

/**
 * Gets the spacing property name for a given property and direction.
 *
 * @export
 * @param {string} property
 * @param {SpacingDirection} direction
 * @returns
 */
export function getSpacingPropertyName(
	property: string,
	direction: SpacingDirection,
) {
	return `${_.kebabCase(property)}-${direction}`;
}

/**
 * Add spacing utilities to Tailwind.
 *
 * @export
 * @param {SpacingType} type The type of spacing.
 * @param {string} property The property that applies the spacing.
 * @param {string} shortname The short name for utility classes names.
 * @param {TailwindPluginHelpers} { e, theme, variants, addUtilities }
 */
export default function (
	type: SpacingType,
	shortname: string,
	property: string,
	{ e, theme, variants, addUtilities }: any,
) {
	const prefix = `${_.kebabCase(shortname)}-${type.charAt(0)}`; // property-name-my-4
	const generators: Array<(size: number, modifier: string) => any> = [
		// 4-way spacing
		(size, modifier) => {
			return {
				[`.${e(prefixNegativeModifiers(prefix, modifier))}`]: {
					[property]: `${size}`,
				},
			};
		},

		// 2-way spacing
		(size, modifier) => ({
			[`.${e(prefixNegativeModifiers(`${prefix}y`, modifier))}`]: {
				[getSpacingPropertyName(property, SpacingDirection.Top)]: `${size}`,
				[getSpacingPropertyName(property, SpacingDirection.Bottom)]: `${size}`,
			},
			[`.${e(prefixNegativeModifiers(`${prefix}x`, modifier))}`]: {
				[getSpacingPropertyName(property, SpacingDirection.Left)]: `${size}`,
				[getSpacingPropertyName(property, SpacingDirection.Right)]: `${size}`,
			},
		}),

		// 1-way spacing
		(size, modifier) => ({
			[`.${e(prefixNegativeModifiers(`${prefix}t`, modifier))}`]: {
				[getSpacingPropertyName(property, SpacingDirection.Top)]: `${size}`,
			},
			[`.${e(prefixNegativeModifiers(`${prefix}r`, modifier))}`]: {
				[getSpacingPropertyName(property, SpacingDirection.Right)]: `${size}`,
			},
			[`.${e(prefixNegativeModifiers(`${prefix}b`, modifier))}`]: {
				[getSpacingPropertyName(property, SpacingDirection.Bottom)]: `${size}`,
			},
			[`.${e(prefixNegativeModifiers(`${prefix}l`, modifier))}`]: {
				[getSpacingPropertyName(property, SpacingDirection.Left)]: `${size}`,
			},
		}),
	];

	addUtilities(
		_.flatMap(generators, generator => {
			return _.flatMap(theme(property, getConfigType(type, theme)), generator);
		}),
		variants(property),
	);
}

export function getConfigType(type: SpacingType, theme: any) {
	return 'margin' === type
		? negativeSpacingConfig(theme)
		: spacingConfig(theme);
}

export const negativeSpacingConfig = (theme: any) => ({
	auto: 'auto',
	...theme('spacing'),
	...negative(theme('spacing')),
});

export const spacingConfig = (theme: any) => theme('spacing');


================================================
FILE: src/index.ts
================================================
module.exports = require('./plugin').default;


================================================
FILE: src/plugin.ts
================================================
import addSnapTypeUtilities from './plugins/type';
import addSnapAlignUtilities from './plugins/align';
import addSnapStopUtilities from './plugins/stop';
import addSnapMarginUtilities from './plugins/margin';
import addSnapPaddingUtilities from './plugins/padding';
import plugin from 'tailwindcss/plugin';
import _ from 'lodash';

export default plugin(function (helpers: any) {
	addSnapTypeUtilities(helpers);
	addSnapAlignUtilities(helpers);
	addSnapStopUtilities(helpers);
	addSnapMarginUtilities(helpers);
	addSnapPaddingUtilities(helpers);
});


================================================
FILE: src/plugins/align.ts
================================================
import createUtilityPlugin from '../factories/createPlugin';

/**
 * Adds utilities for the `scroll-snap-align` property.
 *
 * @see https://developer.mozilla.org/fr/docs/Web/CSS/scroll-snap-align
 * @export
 */
export default function (helpers: any) {
	createUtilityPlugin(
		'scrollSnapAlign',
		{
			'snap-start': 'start',
			'snap-end': 'end',
			'snap-center': 'center',
		},
		helpers,
	);
}


================================================
FILE: src/plugins/margin.ts
================================================
import createSpacingUtilityPlugin from '../factories/createSpacingPlugin';

/**
 * Adds utilities for the `scroll-margin` property.
 *
 * @see https://developer.mozilla.org/fr/docs/Web/CSS/scroll-margin
 * @export
 */
export default function (helpers: any): void {
	createSpacingUtilityPlugin('margin', 'snap', 'scrollMargin', helpers);
}


================================================
FILE: src/plugins/padding.ts
================================================
import createSpacingUtilityPlugin from '../factories/createSpacingPlugin';

/**
 * Adds utilities for the `scroll-padding` property.
 *
 * @see https://developer.mozilla.org/fr/docs/Web/CSS/scroll-padding
 * @export
 */
export default function (helpers: any): void {
	createSpacingUtilityPlugin('padding', 'snap', 'scrollPadding', helpers);
}


================================================
FILE: src/plugins/stop.ts
================================================
import createUtilityPlugin from '../factories/createPlugin';

/**
 * Adds utilities for the `scroll-snap-stop` property.
 *
 * @see https://developer.mozilla.org/fr/docs/Web/CSS/scroll-snap-stop
 * @export
 */
export default function (helpers: any) {
	createUtilityPlugin(
		'scrollSnapStop',
		{
			'always-stop': 'always',
		},
		helpers,
	);
}


================================================
FILE: src/plugins/type.ts
================================================
import createUtilityPlugin from '../factories/createPlugin';

/**
 * Adds utilities for the `scroll-snap-type` property.
 *
 * @see https://developer.mozilla.org/fr/docs/Web/CSS/scroll-snap-type
 * @export
 */
export default function (helpers: any) {
	createUtilityPlugin(
		'scrollSnapType',
		{
			'no-snap': 'none',
			snap: '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'],
		},
		helpers,
	);
}


================================================
FILE: src/utils/negateValue.ts
================================================
import reduceCalc from 'reduce-css-calc';

export default function (value: any) {
	try {
		return reduceCalc(`calc(${value} * -1)`);
	} catch (e) {
		return value;
	}
}


================================================
FILE: src/utils/negative.ts
================================================
import negateValue from "./negateValue";

export default function negative(scale: any) {
  return Object.keys(scale)
    .filter(key => scale[key] !== '0')
    .reduce(
      (negativeScale, key) => ({
        ...negativeScale,
        [`-${key}`]: negateValue(scale[key]),
      }),
      {}
    );
}


================================================
FILE: test/bench/scroll-snap.css
================================================
.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
}

.snap-start {
  scroll-snap-align: start
}

.snap-end {
  scroll-snap-align: end
}

.snap-center {
  scroll-snap-align: center
}

.always-stop {
  scroll-snap-stop: always
}

.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
}

.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
}


================================================
FILE: test/bench/snap-margins.css
================================================
.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
} 


================================================
FILE: test/bench/snap-paddings.css
================================================
.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
} 


================================================
FILE: test/generateCss.ts
================================================
import postcss from 'postcss';
import tailwindcss from 'tailwindcss';
import _ from 'lodash';

export default async function (
	plugin: any,
	theme?: any,
	variants: string[] = [],
	config?: any,
	base: boolean = false,
	components: boolean = false,
	utilities: boolean = true,
	plugins: string[] | false = false,
) {
	_.set(theme, 'screens', false);
	const process =
		(base ? '@tailwind base; ' : '') +
		(components ? '@tailwind components; ' : '') +
		(utilities ? '@tailwind utilities; ' : '');
	const result = await postcss(
		tailwindcss({
			...config,
			theme,
			variants,
			corePlugins: plugins,
			plugins: [plugin],
		}),
	).process(process, {
		from: undefined,
	});
	return result.css;
}


================================================
FILE: test/plugins.test.ts
================================================
import type from '../src/plugins/type';
import align from '../src/plugins/align';
import stop from '../src/plugins/stop';
import margin from '../src/plugins/margin';
import padding from '../src/plugins/padding';
import cssMatcher from 'jest-matcher-css';
import generateCss from './generateCss';
import fs from 'fs';
import _ from 'lodash';

expect.extend({
	toMatchCss: cssMatcher,
});

describe('ScrollSnapType', () => {
	it('generates utilities from default config', async () => {
		const css = await generateCss(type);

		// @ts-ignore
		expect(css).toMatchCss(`
      .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 }
    `);
	});

	it('generates utilities from custom config', async () => {
		const css = await generateCss(type, {
			scrollSnapType: {
				'snap-both-mandatory': 'both mandatory',
			},
		});

		// @ts-ignore
		expect(css).toMatchCss(`
      .snap-both-mandatory { scroll-snap-type: both mandatory }
    `);
	});

	it('generates variants', async () => {
		const css = await generateCss(
			type,
			{
				scrollSnapType: {
					'snap-both-mandatory': 'both mandatory',
				},
			},
			['hover'],
		);

		// @ts-ignore
		expect(css).toMatchCss(`
      .snap-both-mandatory { scroll-snap-type: both mandatory }
      .hover\\:snap-both-mandatory:hover { scroll-snap-type: both mandatory }
    `);
	});
});

describe('ScrollSnapAlign', () => {
	it('generates utilities from default config', async () => {
		const css = await generateCss(align);

		// @ts-ignore
		expect(css).toMatchCss(`
      .snap-start { scroll-snap-align: start }
      .snap-end { scroll-snap-align: end }
      .snap-center { scroll-snap-align: center }
    `);
	});

	it('generates utilities from custom config', async () => {
		const css = await generateCss(align, {
			scrollSnapAlign: {
				'snap-none': 'none',
			},
		});

		// @ts-ignore
		expect(css).toMatchCss(`
      .snap-none { scroll-snap-align: none }
    `);
	});

	it('generates variants', async () => {
		const css = await generateCss(
			align,
			{
				scrollSnapAlign: {
					'snap-none': 'none',
				},
			},
			['hover'],
		);

		// @ts-ignore
		expect(css).toMatchCss(`
      .snap-none { scroll-snap-align: none }
      .hover\\:snap-none:hover { scroll-snap-align: none }
    `);
	});
});

describe('ScrollSnapStop', () => {
	it('generates utilities from default config', async () => {
		const css = await generateCss(stop);

		// @ts-ignore
		expect(css).toMatchCss(`
      .always-stop { scroll-snap-stop: always }
    `);
	});

	it('generates utilities from custom config', async () => {
		const css = await generateCss(stop, {
			scrollSnapStop: {
				'normal-snap': 'normal',
			},
		});

		// @ts-ignore
		expect(css).toMatchCss(`
      .normal-snap { scroll-snap-stop: normal }
    `);
	});

	it('generates variants', async () => {
		const css = await generateCss(
			stop,
			{
				scrollSnapStop: {
					'normal-snap': 'normal',
				},
			},
			['hover'],
		);

		// @ts-ignore
		expect(css).toMatchCss(`
      .normal-snap { scroll-snap-stop: normal }
      .hover\\:normal-snap:hover { scroll-snap-stop: normal }
    `);
	});
});

describe('ScrollMargin', () => {
	it('generates utilities from default config', async () => {
		const css = await generateCss(margin);

		// @ts-ignore
		expect(css).toMatchCss(
			fs.readFileSync('test/bench/snap-margins.css').toString(),
		);
	});

	it('generates utilities from custom config', async () => {
		const css = await generateCss(margin, {
			scrollMargin: {
				tight: '1rem',
				lose: '2rem',
			},
		});

		// @ts-ignore
		expect(css).toMatchCss(`
      .snap-m-tight { scroll-margin: 1rem }
      .snap-m-lose { scroll-margin: 2rem }
      .snap-my-tight { scroll-margin-top: 1rem; scroll-margin-bottom: 1rem }
      .snap-mx-tight { scroll-margin-left: 1rem; scroll-margin-right: 1rem }
      .snap-my-lose { scroll-margin-top: 2rem; scroll-margin-bottom: 2rem }
      .snap-mx-lose { scroll-margin-left: 2rem; scroll-margin-right: 2rem }
      .snap-mt-tight { scroll-margin-top: 1rem }
      .snap-mr-tight { scroll-margin-right: 1rem }
      .snap-mb-tight { scroll-margin-bottom: 1rem }
      .snap-ml-tight { scroll-margin-left: 1rem }
      .snap-mt-lose { scroll-margin-top: 2rem }
      .snap-mr-lose { scroll-margin-right: 2rem }
      .snap-mb-lose { scroll-margin-bottom: 2rem }
      .snap-ml-lose { scroll-margin-left: 2rem }
    `);
	});

	it('generates variants', async () => {
		const css = await generateCss(
			margin,
			{
				scrollMargin: {
					tight: '1rem',
				},
			},
			['hover'],
		);

		// @ts-ignore
		expect(css).toMatchCss(`
      .snap-m-tight { scroll-margin: 1rem }
      .snap-my-tight { scroll-margin-top: 1rem; scroll-margin-bottom: 1rem }
      .snap-mx-tight { scroll-margin-left: 1rem; scroll-margin-right: 1rem }
      .snap-mt-tight { scroll-margin-top: 1rem }
      .snap-mr-tight { scroll-margin-right: 1rem }
      .snap-mb-tight { scroll-margin-bottom: 1rem }
      .snap-ml-tight { scroll-margin-left: 1rem }
      .hover\\:snap-m-tight:hover { scroll-margin: 1rem }
      .hover\\:snap-my-tight:hover { scroll-margin-top: 1rem; scroll-margin-bottom: 1rem }
      .hover\\:snap-mx-tight:hover { scroll-margin-left: 1rem; scroll-margin-right: 1rem }
      .hover\\:snap-mt-tight:hover { scroll-margin-top: 1rem }
      .hover\\:snap-mr-tight:hover { scroll-margin-right: 1rem }
      .hover\\:snap-mb-tight:hover { scroll-margin-bottom: 1rem }
      .hover\\:snap-ml-tight:hover { scroll-margin-left: 1rem }
    `);
	});
});

describe('ScrollPadding', () => {
	it('generates utilities from default config', async () => {
		const css = await generateCss(padding);

		// @ts-ignore
		expect(css).toMatchCss(
			fs.readFileSync('test/bench/snap-paddings.css').toString(),
		);
	});

	it('generates utilities from custom config', async () => {
		const css = await generateCss(padding, {
			scrollPadding: {
				tight: '1rem',
				lose: '2rem',
			},
		});

		// @ts-ignore
		expect(css).toMatchCss(`
      .snap-p-tight { scroll-padding: 1rem }
      .snap-p-lose { scroll-padding: 2rem }
      .snap-py-tight { scroll-padding-top: 1rem; scroll-padding-bottom: 1rem }
      .snap-px-tight { scroll-padding-left: 1rem; scroll-padding-right: 1rem }
      .snap-py-lose { scroll-padding-top: 2rem; scroll-padding-bottom: 2rem }
      .snap-px-lose { scroll-padding-left: 2rem; scroll-padding-right: 2rem }
      .snap-pt-tight { scroll-padding-top: 1rem }
      .snap-pr-tight { scroll-padding-right: 1rem }
      .snap-pb-tight { scroll-padding-bottom: 1rem }
      .snap-pl-tight { scroll-padding-left: 1rem }
      .snap-pt-lose { scroll-padding-top: 2rem }
      .snap-pr-lose { scroll-padding-right: 2rem }
      .snap-pb-lose { scroll-padding-bottom: 2rem }
      .snap-pl-lose { scroll-padding-left: 2rem }
    `);
	});

	it('generates variants', async () => {
		const css = await generateCss(
			padding,
			{
				scrollPadding: {
					tight: '1rem',
				},
			},
			['hover'],
		);

		// @ts-ignore
		expect(css).toMatchCss(`
      .snap-p-tight { scroll-padding: 1rem }
      .snap-py-tight { scroll-padding-top: 1rem; scroll-padding-bottom: 1rem }
      .snap-px-tight { scroll-padding-left: 1rem; scroll-padding-right: 1rem }
      .snap-pt-tight { scroll-padding-top: 1rem }
      .snap-pr-tight { scroll-padding-right: 1rem }
      .snap-pb-tight { scroll-padding-bottom: 1rem }
      .snap-pl-tight { scroll-padding-left: 1rem }
      .hover\\:snap-p-tight:hover { scroll-padding: 1rem }
      .hover\\:snap-py-tight:hover { scroll-padding-top: 1rem; scroll-padding-bottom: 1rem }
      .hover\\:snap-px-tight:hover { scroll-padding-left: 1rem; scroll-padding-right: 1rem }
      .hover\\:snap-pt-tight:hover { scroll-padding-top: 1rem }
      .hover\\:snap-pr-tight:hover { scroll-padding-right: 1rem }
      .hover\\:snap-pb-tight:hover { scroll-padding-bottom: 1rem }
      .hover\\:snap-pl-tight:hover { scroll-padding-left: 1rem }
    `);
	});
});


================================================
FILE: test/tailwind.test.ts
================================================
import plugin from '../src/plugin';
import generateCss from './generateCss';
import cssMatcher from 'jest-matcher-css';
import fs from 'fs';

expect.extend({
	toMatchCss: cssMatcher,
});

describe('All plugins', () => {
	it('generates utilities for all plugins', async () => {
		const css = await generateCss(plugin);

		// @ts-ignore
		expect(css).toMatchCss(
			fs.readFileSync('test/bench/scroll-snap.css').toString(),
		);
	});
});


================================================
FILE: tsconfig.json
================================================
{
	"compilerOptions": {
		"module": "commonjs",
		"target": "es6",
		"declaration": true,
		"outDir": "dist",
		"moduleResolution": "node",
		"lib": ["es2017"],
		"resolveJsonModule": true,
		"esModuleInterop": true
	},
	"include": ["src"],
	"exclude": ["node_modules"]
}