📄 tailwindcss/docs/scroll-snap-align
File: scroll-snap-align.md | Updated: 11/15/2025
Source: https://tailwindcss.com/docs/scroll-snap-align
⌘KCtrl KDocs Blog Showcase Sponsor Plus
- Interactivity
- scroll-snap-align
Interactivity
scroll-snap-align
Utilities for controlling the scroll snap alignment of an element.
| Class | Styles |
| --- | --- |
| 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; |
Snapping to the center
Use the snap-center utility to snap an element to its center when being scrolled inside a snap container:
Scroll in the grid of images to see the expected behavior
snap point
<div class="snap-x ..."> <div class="snap-center ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-06.jpg" /> </div></div>
Snapping to the start
Use the snap-start utility to snap an element to its start when being scrolled inside a snap container:
Scroll in the grid of images to see the expected behavior
snap point
<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 class="snap-start ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-06.jpg" /> </div></div>
Snapping to the end
Use the snap-end utility to snap an element to its end when being scrolled inside a snap container:
Scroll in the grid of images to see the expected behavior
snap point
<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 class="snap-end ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-06.jpg" /> </div></div>
Responsive design
Prefix a scroll-snap-align utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="snap-center md:snap-start ..."> <!-- ... --></div>
Learn more about using variants in the variants documentation .
On this page
Copyright © 2025 Tailwind Labs Inc.·Trademark Policy