1. Interactivity
  2. scroll-snap-align

Interactivity

scroll-snap-align

Utilities for controlling the scroll snap alignment of an element.

ClassStyles
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;

Examples

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.

Copyright © 2025 Tailwind Labs Inc.·Trademark Policy