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>
---
<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>
<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>
<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"]
}
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
SYMBOL INDEX (7 symbols across 3 files)
FILE: src/factories/createPlugin.ts
function getPropertyName (line 38) | function getPropertyName(property: string, value: string | [string, stri...
function getValue (line 49) | function getValue(value: string | [string, string]) {
FILE: src/factories/createSpacingPlugin.ts
type SpacingType (line 12) | type SpacingType = 'margin' | 'padding';
type SpacingDirection (line 20) | enum SpacingDirection {
function getSpacingPropertyName (line 37) | function getSpacingPropertyName(
function getConfigType (line 107) | function getConfigType(type: SpacingType, theme: any) {
FILE: src/utils/negative.ts
function negative (line 3) | function negative(scale: any) {
Condensed preview — 24 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (127K chars).
[
{
"path": ".github/workflows/main.yaml",
"chars": 503,
"preview": "name: CI\n\non:\n push:\n branches:\n - main\n pull_request:\n branches:\n - main\n\njobs:\n test:\n runs-on: "
},
{
"path": ".gitignore",
"chars": 36,
"preview": "node_modules/\ndist/\n.yarn-error.log\n"
},
{
"path": ".npmignore",
"chars": 11,
"preview": "src/\ntest/\n"
},
{
"path": "README.md",
"chars": 55039,
"preview": "<p align=\"center\">\n <h2 align=\"center\">Notice</h2>\n <p align=\"center\">\n\t<b>This plugin is now implemented in Tailwind "
},
{
"path": "jest.config.js",
"chars": 127,
"preview": "module.exports = {\n\tpreset: 'ts-jest',\n\ttestEnvironment: 'node',\n\tglobals: {\n\t\t'ts-jest': {\n\t\t\tdiagnostics: false,\n\t\t},\n"
},
{
"path": "package.json",
"chars": 1361,
"preview": "{\n\t\"name\": \"tailwindcss-scroll-snap\",\n\t\"version\": \"1.1.0\",\n\t\"description\": \"A Tailwind CSS plugin that adds `scroll-snap"
},
{
"path": "src/factories/createPlugin.ts",
"chars": 1435,
"preview": "import _ from 'lodash';\n\n/**\n * Add utilities to Tailwind.\n *\n * @export\n * @param {string} property The Tailwind config"
},
{
"path": "src/factories/createSpacingPlugin.ts",
"chars": 3273,
"preview": "import prefixNegativeModifiers from 'tailwindcss/lib/util/prefixNegativeModifiers';\nimport negative from '../utils/negat"
},
{
"path": "src/index.ts",
"chars": 46,
"preview": "module.exports = require('./plugin').default;\n"
},
{
"path": "src/plugin.ts",
"chars": 551,
"preview": "import addSnapTypeUtilities from './plugins/type';\nimport addSnapAlignUtilities from './plugins/align';\nimport addSnapSt"
},
{
"path": "src/plugins/align.ts",
"chars": 398,
"preview": "import createUtilityPlugin from '../factories/createPlugin';\n\n/**\n * Adds utilities for the `scroll-snap-align` property"
},
{
"path": "src/plugins/margin.ts",
"chars": 339,
"preview": "import createSpacingUtilityPlugin from '../factories/createSpacingPlugin';\n\n/**\n * Adds utilities for the `scroll-margin"
},
{
"path": "src/plugins/padding.ts",
"chars": 343,
"preview": "import createSpacingUtilityPlugin from '../factories/createSpacingPlugin';\n\n/**\n * Adds utilities for the `scroll-paddin"
},
{
"path": "src/plugins/stop.ts",
"chars": 347,
"preview": "import createUtilityPlugin from '../factories/createPlugin';\n\n/**\n * Adds utilities for the `scroll-snap-stop` property."
},
{
"path": "src/plugins/type.ts",
"chars": 816,
"preview": "import createUtilityPlugin from '../factories/createPlugin';\n\n/**\n * Adds utilities for the `scroll-snap-type` property."
},
{
"path": "src/utils/negateValue.ts",
"chars": 169,
"preview": "import reduceCalc from 'reduce-css-calc';\n\nexport default function (value: any) {\n\ttry {\n\t\treturn reduceCalc(`calc(${val"
},
{
"path": "src/utils/negative.ts",
"chars": 302,
"preview": "import negateValue from \"./negateValue\";\n\nexport default function negative(scale: any) {\n return Object.keys(scale)\n "
},
{
"path": "test/bench/scroll-snap.css",
"chars": 22050,
"preview": ".no-snap {\n scroll-snap-type: none\n}\n\n.snap {\n scroll-snap-type: var(--scroll-snap-direction, both) var(--scroll-snap-"
},
{
"path": "test/bench/snap-margins.css",
"chars": 14250,
"preview": ".snap-m-0 {\n scroll-margin: 0\n}\n\n.snap-m-1 {\n scroll-margin: 0.25rem\n}\n\n.snap-m-2 {\n scroll-margin: 0.5rem\n}\n\n.snap-m"
},
{
"path": "test/bench/snap-paddings.css",
"chars": 7128,
"preview": ".snap-p-0 {\n scroll-padding: 0\n}\n\n.snap-p-1 {\n scroll-padding: 0.25rem\n}\n\n.snap-p-2 {\n scroll-padding: 0.5rem\n}\n\n.sna"
},
{
"path": "test/generateCss.ts",
"chars": 705,
"preview": "import postcss from 'postcss';\nimport tailwindcss from 'tailwindcss';\nimport _ from 'lodash';\n\nexport default async func"
},
{
"path": "test/plugins.test.ts",
"chars": 8409,
"preview": "import type from '../src/plugins/type';\nimport align from '../src/plugins/align';\nimport stop from '../src/plugins/stop'"
},
{
"path": "test/tailwind.test.ts",
"chars": 436,
"preview": "import plugin from '../src/plugin';\nimport generateCss from './generateCss';\nimport cssMatcher from 'jest-matcher-css';\n"
},
{
"path": "tsconfig.json",
"chars": 272,
"preview": "{\n\t\"compilerOptions\": {\n\t\t\"module\": \"commonjs\",\n\t\t\"target\": \"es6\",\n\t\t\"declaration\": true,\n\t\t\"outDir\": \"dist\",\n\t\t\"moduleR"
}
]
About this extraction
This page contains the full source code of the innocenzi/tailwindcss-scroll-snap GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 24 files (115.6 KB), approximately 41.0k tokens, and a symbol index with 7 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.