Expand description
Utilities for controlling an element’s scroll offset within a snap container.
| Class | Properties |
|---|---|
| scroll-p-<float> | scroll-padding: <float / 4>rem; |
| scroll-p-<integer>/<integer> | scroll-padding: (<integer>/<integer>)%; |
| scroll-p-px | scroll-padding: 1px; |
| scroll-p-auto | scroll-padding: auto; |
| scroll-px-<float> | scroll-padding-inline: <float / 4>rem; |
| scroll-px-<integer>/<integer> | scroll-padding-inline: (<integer>/<integer>)%; |
| scroll-px-px | scroll-padding-inline: 1px; |
| scroll-px-auto | scroll-padding-inline: auto; |
| scroll-py-<float> | scroll-padding-block: <float / 4>rem; |
| scroll-py-<integer>/<integer> | scroll-padding-block: (<integer>/<integer>)%; |
| scroll-py-px | scroll-padding-block: 1px; |
| scroll-py-auto | scroll-padding-block: auto; |
| scroll-ps-<float> | scroll-padding-inline-start: <float / 4>rem; |
| scroll-ps-<integer>/<integer> | scroll-padding-inline-start: (<integer>/<integer>)%; |
| scroll-ps-px | scroll-padding-inline-start: 1px; |
| scroll-ps-auto | scroll-padding-inline-start: auto; |
| scroll-pe-<float> | scroll-padding-inline-end: <float / 4>rem; |
| scroll-pe-<integer>/<integer> | scroll-padding-inline-end: (<integer>/<integer>)%; |
| scroll-pe-px | scroll-padding-inline-end: 1px; |
| scroll-pe-auto | scroll-padding-inline-end: auto; |
| scroll-pt-<float> | scroll-padding-top: <float / 4>rem; |
| scroll-pt-<integer>/<integer> | scroll-padding-top: (<integer>/<integer>)%; |
| scroll-pt-px | scroll-padding-top: 1px; |
| scroll-pt-auto | scroll-padding-top: auto; |
| scroll-pr-<float> | scroll-padding-right: <float / 4>rem; |
| scroll-pr-<integer>/<integer> | scroll-padding-right: (<integer>/<integer>)%; |
| scroll-pr-px | scroll-padding-right: 1px; |
| scroll-pr-auto | scroll-padding-right: auto; |
| scroll-pb-<float> | scroll-padding-bottom: <float / 4>rem; |
| scroll-pb-<integer>/<integer> | scroll-padding-bottom: (<integer>/<integer>)%; |
| scroll-pb-px | scroll-padding-bottom: 1px; |
| scroll-pb-auto | scroll-padding-bottom: auto; |
| scroll-pl-<float> | scroll-padding-left: <float / 4>rem; |
| scroll-pl-<integer>/<integer> | scroll-padding-left: (<integer>/<integer>)%; |
| scroll-pl-px | scroll-padding-left: 1px; |
| scroll-pl-auto | scroll-padding-left: auto; |
§Tailwind compatibility
Scroll padding 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-py-[1cm].