snap-start utility
The snap-start utility applies scroll-snap-align: start; to an element. Use this utility to snap an element to its start edge when being scrolled inside a snap container.
Tailwind CSS · Utilities reference · all subjects
scroll-snap-align
8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
snap-end utility
The snap-end utility applies scroll-snap-align: end; to an element. Use this utility to snap an element to its end edge when being scrolled inside a snap container.
snap-center utility
The snap-center utility applies scroll-snap-align: center; to an element. Use this utility to snap an element to its center when being scrolled inside a snap container.
snap-align-none utility
The snap-align-none utility applies scroll-snap-align: none; to an element.
scroll-snap-align CSS property
The scroll-snap-align CSS property controls where on a snappable element the scroll snap point is positioned. Values include start, end, center, and none.
snap-start example with scroll containers
Example HTML showing snap-start usage: <div class="snap-x ..."><div class="snap-start ..."><img src="/img/vacation-01.jpg" /></div><div class="snap-start ..."><img src="/img/vacation-02.jpg" /></div><div class="snap-start ..."><img src="/img/vacation-03.jpg" /></div></div>
snap-end example with scroll containers
Example HTML showing snap-end usage: <div class="snap-x ..."><div class="snap-end ..."><img src="/img/vacation-01.jpg" /></div><div class="snap-end ..."><img src="/img/vacation-02.jpg" /></div><div class="snap-end ..."><img src="/img/vacation-03.jpg" /></div></div>
scroll-snap-align responsive design
The scroll-snap-align property supports responsive design variants. You can use responsive prefixes like md:snap-start or sm:snap-center to apply different scroll snap alignment values at different breakpoints.