scroll-m-* — breathing room when scrolled to (anchor offset). This family contains 315 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
scroll-m-0 | scroll-margin: 0px; |
scroll-m-1 | scroll-margin: 0.25rem; |
scroll-m-2 | scroll-margin: 0.5rem; |
scroll-m-3 | scroll-margin: 0.75rem; |
scroll-m-4 | scroll-margin: 1rem; |
scroll-m-5 | scroll-margin: 1.25rem; |
scroll-m-6 | scroll-margin: 1.5rem; |
scroll-m-7 | scroll-margin: 1.75rem; |
scroll-m-8 | scroll-margin: 2rem; |
scroll-m-9 | scroll-margin: 2.25rem; |
scroll-m-10 | scroll-margin: 2.5rem; |
scroll-m-11 | scroll-margin: 2.75rem; |
scroll-m-12 | scroll-margin: 3rem; |
scroll-m-14 | scroll-margin: 3.5rem; |
scroll-m-16 | scroll-margin: 4rem; |
scroll-m-20 | scroll-margin: 5rem; |
scroll-m-24 | scroll-margin: 6rem; |
scroll-m-28 | scroll-margin: 7rem; |
scroll-m-32 | scroll-margin: 8rem; |
scroll-m-36 | scroll-margin: 9rem; |
scroll-m-40 | scroll-margin: 10rem; |
scroll-m-44 | scroll-margin: 11rem; |
scroll-m-48 | scroll-margin: 12rem; |
scroll-m-52 | scroll-margin: 13rem; |
scroll-m-56 | scroll-margin: 14rem; |
scroll-m-60 | scroll-margin: 15rem; |
scroll-m-64 | scroll-margin: 16rem; |
scroll-m-72 | scroll-margin: 18rem; |
scroll-m-80 | scroll-margin: 20rem; |
scroll-m-96 | scroll-margin: 24rem; |
scroll-m-px | scroll-margin: 1px; |
scroll-m-0.5 | scroll-margin: 0.125rem; |
scroll-m-1.5 | scroll-margin: 0.375rem; |
scroll-m-2.5 | scroll-margin: 0.625rem; |
scroll-m-3.5 | scroll-margin: 0.875rem; |
scroll-mx-0 | scroll-margin-left: 0px; scroll-margin-right: 0px; |
scroll-mx-1 | scroll-margin-left: 0.25rem; scroll-margin-right: 0.25rem; |
scroll-mx-2 | scroll-margin-left: 0.5rem; scroll-margin-right: 0.5rem; |
scroll-mx-3 | scroll-margin-left: 0.75rem; scroll-margin-right: 0.75rem; |
scroll-mx-4 | scroll-margin-left: 1rem; scroll-margin-right: 1rem; |
scroll-mx-5 | scroll-margin-left: 1.25rem; scroll-margin-right: 1.25rem; |
scroll-mx-6 | scroll-margin-left: 1.5rem; scroll-margin-right: 1.5rem; |
scroll-mx-7 | scroll-margin-left: 1.75rem; scroll-margin-right: 1.75rem; |
scroll-mx-8 | scroll-margin-left: 2rem; scroll-margin-right: 2rem; |
scroll-mx-9 | scroll-margin-left: 2.25rem; scroll-margin-right: 2.25rem; |
scroll-mx-10 | scroll-margin-left: 2.5rem; scroll-margin-right: 2.5rem; |
scroll-mx-11 | scroll-margin-left: 2.75rem; scroll-margin-right: 2.75rem; |
scroll-mx-12 | scroll-margin-left: 3rem; scroll-margin-right: 3rem; |
scroll-mx-14 | scroll-margin-left: 3.5rem; scroll-margin-right: 3.5rem; |
scroll-mx-16 | scroll-margin-left: 4rem; scroll-margin-right: 4rem; |
scroll-mx-20 | scroll-margin-left: 5rem; scroll-margin-right: 5rem; |
scroll-mx-24 | scroll-margin-left: 6rem; scroll-margin-right: 6rem; |
scroll-mx-28 | scroll-margin-left: 7rem; scroll-margin-right: 7rem; |
scroll-mx-32 | scroll-margin-left: 8rem; scroll-margin-right: 8rem; |
scroll-mx-36 | scroll-margin-left: 9rem; scroll-margin-right: 9rem; |
scroll-mx-40 | scroll-margin-left: 10rem; scroll-margin-right: 10rem; |
scroll-mx-44 | scroll-margin-left: 11rem; scroll-margin-right: 11rem; |
scroll-mx-48 | scroll-margin-left: 12rem; scroll-margin-right: 12rem; |
scroll-mx-52 | scroll-margin-left: 13rem; scroll-margin-right: 13rem; |
scroll-mx-56 | scroll-margin-left: 14rem; scroll-margin-right: 14rem; |
…and 255 more in this family — search by class name to find the exact one.
Example#
example
<section id="pricing" class="scroll-mt-24">Anchors land below the sticky header</section>Responsive & variants#
Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- scroll-mt-24 pairs with h-24 sticky navbars
Related#
utilities/interactivity/cursor|Cursor · utilities/interactivity/scroll-snap|Scroll snap