Interactivity

Scroll Snap Type

Utilities for controlling how strictly snap points are enforced in a snap container.

Quick reference

Class
Properties
snap-nonescroll-snap-type: none;
snap-xscroll-snap-type: x var(—tw-scroll-snap-strictness);
snap-yscroll-snap-type: y var(—tw-scroll-snap-strictness);
snap-bothscroll-snap-type: both var(—tw-scroll-snap-strictness);
snap-mandatory—tw-scroll-snap-strictness: mandatory;
snap-proximity—tw-scroll-snap-strictness: proximity;

Basic usage

Horizontal scroll snapping

Use the snap-x utility to enable horizontal scroll snapping within an element.

For scroll snapping to work, you need to also set the scroll snap alignment on the children within the element.

Scroll Snap Type - 图1

Scroll in the grid of images to see the expected behaviour

Scroll Snap Type - 图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>

Mandatory scroll snapping

Use the snap-mandatory utility to force a snap container to always come to rest on a snap point.

Scroll Snap Type - 图3

Scroll in the grid of images to see the expected behaviour

Scroll Snap Type - 图4

  1. <div class="snap-mandatory 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>

Proximity scroll snapping

Use the snap-proximity utility to make a snap container come to rest on snap points that are close in proximity. This is the browser default.

Scroll Snap Type - 图5

Scroll in the grid of images to see the expected behaviour

Scroll Snap Type - 图6

  1. <div class="snap-proximity 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>

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-x to only apply the snap-x utility on hover.

  1. <div class="hover:snap-x">
  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-x to apply the snap-x utility at only medium screen sizes and above.

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

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