snap-x/y, snap-start/center/end, snap-mandatory/proximity — CSS scroll snapping. This family contains 12 generated classes in Nakshora 3.0.
Classes#
| Class | Generated CSS |
|---|---|
snap-none | scroll-snap-type: none; |
snap-x | scroll-snap-type: x var(--tw-scroll-snap-strictness); |
snap-y | scroll-snap-type: y var(--tw-scroll-snap-strictness); |
snap-both | scroll-snap-type: both var(--tw-scroll-snap-strictness); |
snap-mandatory | --tw-scroll-snap-strictness: mandatory; |
snap-proximity | --tw-scroll-snap-strictness: proximity; |
snap-start | scroll-snap-align: start; |
snap-end | scroll-snap-align: end; |
snap-center | scroll-snap-align: center; |
snap-align-none | scroll-snap-align: none; |
snap-normal | scroll-snap-stop: normal; |
snap-always | scroll-snap-stop: always; |
Example#
example
<div class="snap-x snap-mandatory flex overflow-x-auto">
<div class="snap-center shrink-0 w-4/5">Slide</div>
</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.
Best practices#
- Carousels without JS: snap-x + snap-mandatory + shrink-0 slides
- snap-proximity feels more forgiving on long lists
Related#
utilities/interactivity/cursor|Cursor · utilities/interactivity/scroll-snap|Scroll snap