Expand description
Utilities for controlling the scroll offset around items in a snap container.
| Class | Properties |
|---|---|
| scroll-m-<float> | margin: <float / 4>rem; |
| scroll-m-<integer>/<integer> | margin: (<integer>/<integer>)%; |
| scroll-m-px | margin: 1px; |
| scroll-m-auto | margin: auto; |
| scroll-mx-<float> | scroll-margin-inline: <float / 4>rem; |
| scroll-mx-<integer>/<integer> | scroll-margin-inline: (<integer>/<integer>)%; |
| scroll-mx-px | scroll-margin-inline: 1px; |
| scroll-mx-auto | scroll-margin-inline: auto; |
| scroll-my-<float> | scroll-margin-block: <float / 4>rem; |
| scroll-my-<integer>/<integer> | scroll-margin-block: (<integer>/<integer>)%; |
| scroll-my-px | scroll-margin-block: 1px; |
| scroll-my-auto | scroll-margin-block: auto; |
| scroll-ms-<float> | scroll-margin-inline-start: <float / 4>rem; |
| scroll-ms-<integer>/<integer> | scroll-margin-inline-start: (<integer>/<integer>)%; |
| scroll-ms-px | scroll-margin-inline-start: 1px; |
| scroll-ms-auto | scroll-margin-inline-start: auto; |
| scroll-me-<float> | scroll-margin-inline-end: <float / 4>rem; |
| scroll-me-<integer>/<integer> | scroll-margin-inline-end: (<integer>/<integer>)%; |
| scroll-me-px | scroll-margin-inline-end: 1px; |
| scroll-me-auto | scroll-margin-inline-end: auto; |
| scroll-mt-<float> | scroll-margin-top: <float / 4>rem; |
| scroll-mt-<integer>/<integer> | scroll-margin-top: (<integer>/<integer>)%; |
| scroll-mt-px | scroll-margin-top: 1px; |
| scroll-mt-auto | scroll-margin-top: auto; |
| scroll-mr-<float> | scroll-margin-right: <float / 4>rem; |
| scroll-mr-<integer>/<integer> | scroll-margin-right: (<integer>/<integer>)%; |
| scroll-mr-px | scroll-margin-right: 1px; |
| scroll-mr-auto | scroll-margin-right: auto; |
| scroll-mb-<float> | scroll-margin-bottom: <float / 4>rem; |
| scroll-mb-<integer>/<integer> | scroll-margin-bottom: (<integer>/<integer>)%; |
| scroll-mb-px | scroll-margin-bottom: 1px; |
| scroll-mb-auto | scroll-margin-bottom: auto; |
| scroll-ml-<float> | scroll-margin-left: <float / 4>rem; |
| scroll-ml-<integer>/<integer> | scroll-margin-left: (<integer>/<integer>)%; |
| scroll-ml-px | scroll-margin-left: 1px; |
| scroll-ml-auto | scroll-margin-left: auto; |
§Tailwind compatibility
Scroll margin values don’t follow Tailwind’s philosophy of limiting possible values and all spacing values are supported. They are however perfectly compatible with Tailwind’s values.
§Arbitrary values
Any <length> property is allowed as arbitrary value.
For example, scroll-mx-[1.42rem].
§Negative values
This plugin supports negative values. For example, -scroll-mt-2 or hover:-scroll-mt-2.