Tailwind CSS - Scroll Snap Type

Modern Guide to Tailwind CSS: Scroll Snap

Scroll Snap utilities allow you to control the snapping behavior of a scroll container, creating delightful user experiences like image carousels, section-based websites, and product galleries. It ensures that when a user stops scrolling, the viewport ‘snaps’ to a predefined point.

Core Concepts: Container, Strictness, and Alignment

Implementing scroll snap involves two parts: setting up the scroll container and defining the snap points on the child elements.

1. Scroll Container Utilities

These classes are applied to the parent scrolling element.

Class	CSS Properties	Description
snap-none	scroll-snap-type: none;	Disables scroll snapping entirely.
snap-x	scroll-snap-type: x …;	Enables snapping on the horizontal axis.
snap-y	scroll-snap-type: y …;	Enables snapping on the vertical axis.
snap-both	scroll-snap-type: both …;	Enables snapping on both axes.

2. Strictness Utilities

These are also applied to the parent container, alongside a snap-* utility, to define how strictly the browser should enforce snapping.

Class	Effect	Use Case
snap-mandatory	The browser must snap to a snap point when scrolling ends.	Best for layouts where seeing a full item is critical, like a full-screen slide deck.
snap-proximity	The browser may snap to a snap point if it’s close.	More forgiving; good for long-form content with optional snap points.

3. Child Alignment Utilities

These classes are applied to the child elements within the scroll container to define where they should align within the viewport.

Class	CSS Properties
snap-start	scroll-snap-align: start;
snap-center	scroll-snap-align: center;
snap-end	scroll-snap-align: end;

Mini-Project: Building a Horizontal Product Carousel

Let’s build a common UI pattern: a horizontal carousel that snaps each product card to the center of the container. We will use a modern development setup for this.

Example Code (index.html)

Ensure you have a modern Tailwind CSS setup (as described in the previous tutorial). The following HTML creates a scrollable container that snaps each child to the center.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Scroll Snap Carousel</title>
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 font-sans p-8">

  <h1 class="text-3xl font-bold mb-4 text-gray-800">Featured Products</h1>

  <!--
    Scroll Container Setup:
    - `snap-x`: Enable horizontal snapping.
    - `snap-mandatory`: Force snapping to an element.
    - `overflow-x-auto`: Allow horizontal scrolling.
    - `flex`: To lay out children in a row.
  -->
  <div class="snap-x snap-mandatory overflow-x-auto flex w-full space-x-4 pb-4">
    <!--
      Snap Child Setup:
      - `snap-center`: Each child will snap to the center of the container.
      - `flex-shrink-0`: Prevent cards from shrinking to fit.
    -->
    <div class="snap-center flex-shrink-0 w-80">
      <div class="bg-white rounded-lg shadow-lg p-6">
        <h3 class="font-bold text-xl">Product A</h3>
        <p class="text-gray-600">High-quality item for your needs.</p>
      </div>
    </div>
    <div class="snap-center flex-shrink-0 w-80">
      <div class="bg-white rounded-lg shadow-lg p-6">
        <h3 class="font-bold text-xl">Product B</h3>
        <p class="text-gray-600">Another great choice for you.</p>
      </div>
    </div>
    <div class="snap-center flex-shrink-0 w-80">
      <div class="bg-white rounded-lg shadow-lg p-6">
        <h3 class="font-bold text-xl">Product C</h3>
        <p class="text-gray-600">The best value on the market.</p>
      </div>
    </div>
    <div class="snap-center flex-shrink-0 w-80">
      <div class="bg-white rounded-lg shadow-lg p-6">
        <h3 class="font-bold text-xl">Product D</h3>
        <p class="text-gray-600">A premium and durable option.</p>
      </div>
    </div>
  </div>
</body>
</html>

Best Practices & Accessibility (a11y)

• Avoid Scroll Trapping: Be cautious with snap-mandatory on the main page axis (snap-y). It can make it difficult for users with imprecise pointing devices to scroll past a section, creating a poor experience. It’s generally safer for component-level carousels.
• Provide Alternatives: Ensure users can navigate to content in other ways (e.g., arrow buttons for a carousel), as not all users can or prefer to scroll.
• Focus Management: For interactive elements inside snap children, ensure keyboard focus (Tab) behaves predictably as the user navigates.
• Performance: Scroll snapping is highly performant as it’s handled natively by the browser’s rendering engine.