Tailwind CSS - Scroll Snap Stop

Modern Guide to Tailwind CSS: Scroll Snap Stop

Scroll Snap is a powerful CSS feature for creating well-controlled scrolling experiences, perfect for image carousels, product galleries, and section-based pages. Tailwind’s Scroll Snap Stop utilities control how strictly the browser should stop at each snap point when the user scrolls quickly.

Scroll Snap Stop Utilities

These utilities control the scroll-snap-stop CSS property. They are used on the child elements within a scroll snap container.

Class	CSS Properties	Behavior
`snap-normal`	`scroll-snap-stop: normal;`	Default behavior. The browser may skip over this snap point if the user scrolls fast enough.
`snap-always`	`scroll-snap-stop: always;`	Forces a stop. The browser is required to stop at this snap point, regardless of scroll speed.

Key Concept: The Scroll Snap Container

For snap-normal or snap-always to have any effect, they must be applied to direct children of a scroll container. This container needs a few essential utilities:

Scroll Overflow: overflow-x-auto or overflow-y-auto.
Snap Type: snap-x or snap-y to define the axis.
Snap Strictness: snap-mandatory (always snaps) or snap-proximity (snaps if close).
Child Snap Alignment: Utilities like snap-center, snap-start, or snap-end on the children to define where they should align.

Example: Product Gallery with `snap-always`

This example shows a horizontal product gallery where each item is a mandatory stop. This ensures users see every product as they scroll, which is ideal for e-commerce sites.

<!-- Assumes a standard Tailwind CSS project setup -->
<div class="w-full max-w-4xl mx-auto my-10">
  <h3 class="text-2xl font-bold text-center mb-4">Featured Products</h3>
  <!-- The Scroll Snap Container -->
  <div class="flex overflow-x-auto snap-x snap-mandatory scroll-smooth p-4 gap-4 bg-gray-100 rounded-lg">

    <!-- Scroll Snap Children -->
    <div class="snap-center snap-always flex-shrink-0 w-80 h-48 bg-white rounded-lg shadow-md flex items-center justify-center text-2xl font-bold text-slate-700">
      Product 1
    </div>
    <div class="snap-center snap-always flex-shrink-0 w-80 h-48 bg-white rounded-lg shadow-md flex items-center justify-center text-2xl font-bold text-slate-700">
      Product 2
    </div>
    <div class="snap-center snap-always flex-shrink-0 w-80 h-48 bg-white rounded-lg shadow-md flex items-center justify-center text-2xl font-bold text-slate-700">
      Product 3
    </div>
    <div class="snap-center snap-always flex-shrink-0 w-80 h-48 bg-white rounded-lg shadow-md flex items-center justify-center text-2xl font-bold text-slate-700">
      Product 4
    </div>

  </div>
  <p class="text-center text-gray-500 mt-2">Scroll horizontally. Each product is a guaranteed stop.</p>
</div>

Best Practices and Accessibility

Best Practice: Use snap-always when it’s critical that a user sees each piece of content in a sequence. Use snap-normal for less critical ‘browsing’ interfaces.
Pro Tip: Add the scroll-smooth utility to the container for a much more pleasant, hardware-accelerated scrolling animation.
Accessibility (a11y): Scroll snapping can sometimes ‘trap’ users, especially those navigating with a keyboard. Ensure all snapped elements are focusable and that the container can be scrolled out of. Avoid using scroll snapping on the main <body> of your page unless it’s a core part of the user experience (like a presentation).
Debugging Tip: If scroll snapping isn’t working, check the following: 1) Is the container a scroll container (overflow-x/y-auto)? 2) Does it have snap-x/y and snap-mandatory/proximity? 3) Are the snap utilities (snap-center, snap-always) on the direct children of the container? 4) Do the children have a size (w- or h-) and flex-shrink-0 if in a flexbox container?