Interactivity

Scroll Snap Align

Utilities for controlling the scroll snap alignment of an element.

Quick reference

Class
Properties
snap-startscroll-snap-align: start;
snap-endscroll-snap-align: end;
snap-centerscroll-snap-align: center;
snap-align-nonescroll-snap-align: none;

Basic usage

Snapping to the center

Use the snap-center utility to snap an element to its center when being scrolled inside a snap container.

Scroll Snap Align - 图1

Scroll in the grid of images to see the expected behaviour

Scroll Snap Align - 图2

  1. <div class="snap-x ...">
  2.   <div class="snap-center ...">
  3.     <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  4.   </div>
  5.   <div class="snap-center ...">
  6.     <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  7.   </div>
  8.   <div class="snap-center ...">
  9.     <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  10.   </div>
  11.   <div class="snap-center ...">
  12.     <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  13.   </div>
  14.   <div class="snap-center ...">
  15.     <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  16.   </div>
  17.   <div class="snap-center ...">
  18.     <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  19.   </div>
  20. </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 Snap Align - 图3

Scroll in the grid of images to see the expected behaviour

Scroll Snap Align - 图4

  1. <div class="snap-x ...">
  2.   <div class="snap-start ...">
  3.     <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  4.   </div>
  5.   <div class="snap-start ...">
  6.     <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  7.   </div>
  8.   <div class="snap-start ...">
  9.     <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  10.   </div>
  11.   <div class="snap-start ...">
  12.     <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  13.   </div>
  14.   <div class="snap-start ...">
  15.     <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  16.   </div>
  17.   <div class="snap-start ...">
  18.     <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  19.   </div>
  20. </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 Snap Align - 图5

Scroll in the grid of images to see the expected behaviour

Scroll Snap Align - 图6

  1. <div class="snap-x ...">
  2.   <div class="snap-end ...">
  3.     <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  4.   </div>
  5.   <div class="snap-end ...">
  6.     <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  7.   </div>
  8.   <div class="snap-end ...">
  9.     <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  10.   </div>
  11.   <div class="snap-end ...">
  12.     <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  13.   </div>
  14.   <div class="snap-end ...">
  15.     <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  16.   </div>
  17.   <div class="snap-end ...">
  18.     <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  19.   </div>
  20. </div>

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:snap-start to only apply the snap-start utility on hover.

  1. <div class="snap-center hover:snap-start">
  2.   <!-- ... -->
  3. </div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:snap-start to apply the snap-start utility at only medium screen sizes and above.

  1. <div class="snap-center md:snap-start">
  2.   <!-- ... -->
  3. </div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.