scroll-p-* — inset the scroll container's snap/anchor area. This family contains 315 generated classes in Nakshora 3.0.
Classes#
| Class | Generated CSS |
|---|---|
scroll-p-0 | scroll-padding: 0px; |
scroll-p-1 | scroll-padding: 0.25rem; |
scroll-p-2 | scroll-padding: 0.5rem; |
scroll-p-3 | scroll-padding: 0.75rem; |
scroll-p-4 | scroll-padding: 1rem; |
scroll-p-5 | scroll-padding: 1.25rem; |
scroll-p-6 | scroll-padding: 1.5rem; |
scroll-p-7 | scroll-padding: 1.75rem; |
scroll-p-8 | scroll-padding: 2rem; |
scroll-p-9 | scroll-padding: 2.25rem; |
scroll-p-10 | scroll-padding: 2.5rem; |
scroll-p-11 | scroll-padding: 2.75rem; |
scroll-p-12 | scroll-padding: 3rem; |
scroll-p-14 | scroll-padding: 3.5rem; |
scroll-p-16 | scroll-padding: 4rem; |
scroll-p-20 | scroll-padding: 5rem; |
scroll-p-24 | scroll-padding: 6rem; |
scroll-p-28 | scroll-padding: 7rem; |
scroll-p-32 | scroll-padding: 8rem; |
scroll-p-36 | scroll-padding: 9rem; |
scroll-p-40 | scroll-padding: 10rem; |
scroll-p-44 | scroll-padding: 11rem; |
scroll-p-48 | scroll-padding: 12rem; |
scroll-p-52 | scroll-padding: 13rem; |
scroll-p-56 | scroll-padding: 14rem; |
scroll-p-60 | scroll-padding: 15rem; |
scroll-p-64 | scroll-padding: 16rem; |
scroll-p-72 | scroll-padding: 18rem; |
scroll-p-80 | scroll-padding: 20rem; |
scroll-p-96 | scroll-padding: 24rem; |
scroll-p-px | scroll-padding: 1px; |
scroll-p-0.5 | scroll-padding: 0.125rem; |
scroll-p-1.5 | scroll-padding: 0.375rem; |
scroll-p-2.5 | scroll-padding: 0.625rem; |
scroll-p-3.5 | scroll-padding: 0.875rem; |
scroll-px-0 | scroll-padding-left: 0px; scroll-padding-right: 0px; |
scroll-px-1 | scroll-padding-left: 0.25rem; scroll-padding-right: 0.25rem; |
scroll-px-2 | scroll-padding-left: 0.5rem; scroll-padding-right: 0.5rem; |
scroll-px-3 | scroll-padding-left: 0.75rem; scroll-padding-right: 0.75rem; |
scroll-px-4 | scroll-padding-left: 1rem; scroll-padding-right: 1rem; |
scroll-px-5 | scroll-padding-left: 1.25rem; scroll-padding-right: 1.25rem; |
scroll-px-6 | scroll-padding-left: 1.5rem; scroll-padding-right: 1.5rem; |
scroll-px-7 | scroll-padding-left: 1.75rem; scroll-padding-right: 1.75rem; |
scroll-px-8 | scroll-padding-left: 2rem; scroll-padding-right: 2rem; |
scroll-px-9 | scroll-padding-left: 2.25rem; scroll-padding-right: 2.25rem; |
scroll-px-10 | scroll-padding-left: 2.5rem; scroll-padding-right: 2.5rem; |
scroll-px-11 | scroll-padding-left: 2.75rem; scroll-padding-right: 2.75rem; |
scroll-px-12 | scroll-padding-left: 3rem; scroll-padding-right: 3rem; |
scroll-px-14 | scroll-padding-left: 3.5rem; scroll-padding-right: 3.5rem; |
scroll-px-16 | scroll-padding-left: 4rem; scroll-padding-right: 4rem; |
scroll-px-20 | scroll-padding-left: 5rem; scroll-padding-right: 5rem; |
scroll-px-24 | scroll-padding-left: 6rem; scroll-padding-right: 6rem; |
scroll-px-28 | scroll-padding-left: 7rem; scroll-padding-right: 7rem; |
scroll-px-32 | scroll-padding-left: 8rem; scroll-padding-right: 8rem; |
scroll-px-36 | scroll-padding-left: 9rem; scroll-padding-right: 9rem; |
scroll-px-40 | scroll-padding-left: 10rem; scroll-padding-right: 10rem; |
scroll-px-44 | scroll-padding-left: 11rem; scroll-padding-right: 11rem; |
scroll-px-48 | scroll-padding-left: 12rem; scroll-padding-right: 12rem; |
scroll-px-52 | scroll-padding-left: 13rem; scroll-padding-right: 13rem; |
scroll-px-56 | scroll-padding-left: 14rem; scroll-padding-right: 14rem; |
…and 255 more in this family — search by class name to find the exact one.
Example#
example
<div class="snap-x scroll-px-6 overflow-x-auto">…</div>Responsive & variants#
Every class here accepts screen prefixes (sm: … xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Related#
utilities/interactivity/cursor|Cursor · utilities/interactivity/scroll-snap|Scroll snap