Tailwind CSS - Scroll Snap Align

Tailwind’s scroll snap utilities allow you to create engaging, ‘snap-to-position’ scrolling experiences, perfect for image carousels, product galleries, or full-page vertical slides. These utilities control where and how child elements align within a scroll container as the user scrolls.

Key Concepts: Container and Items

Creating a scroll snap interface involves two parts:

The Scroll Container (Parent): You must define the scroll direction (snap-x or snap-y) and the strictness (snap-mandatory or snap-proximity).
The Snap Items (Children): You must specify how each child should align to the container’s ‘snapport’ using utilities like snap-start, snap-center, or snap-end.

Class	CSS Properties
`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;`

Practical Application: An Image Carousel

This example builds a responsive horizontal image carousel. We use snap-x and snap-mandatory on the parent div to create a horizontal snap container. Each image inside is a snap item. Try changing snap-start to snap-center or snap-end on the img tags to see how it changes the alignment.

Example: Horizontal Snap Carousel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Snap Carousel</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-4 md:p-8">

    <div class="max-w-4xl mx-auto">
        <h1 class="text-2xl md:text-3xl font-bold text-center mb-4">Scroll Snap Gallery</h1>
        <p class="text-center text-gray-600 mb-6">Scroll horizontally to see the items snap into place.</p>

        <!-- Scroll Snap Container -->
        <div class="flex overflow-x-auto snap-x snap-mandatory scroll-smooth pb-4 space-x-4">

            <!-- Snap Items -->
            <div class="snap-center flex-shrink-0 w-4/5 md:w-2/3">
                <img src="https://images.unsplash.com/photo-1682687220247-9f786e34d472?w=500" alt="Desert landscape 1" class="w-full h-80 object-cover rounded-lg shadow-xl">
                <p class="text-center mt-2 font-semibold">Snap Center</p>
            </div>

            <div class="snap-center flex-shrink-0 w-4/5 md:w-2/3">
                <img src="https://images.unsplash.com/photo-1682685797828-d3b2561deef4?w=500" alt="Desert landscape 2" class="w-full h-80 object-cover rounded-lg shadow-xl">
                <p class="text-center mt-2 font-semibold">Snap Center</p>
            </div>

            <div class="snap-start flex-shrink-0 w-4/5 md:w-2/3">
                <img src="https://images.unsplash.com/photo-1707343848655-318af70f0df2?w=500" alt="Underwater scene" class="w-full h-80 object-cover rounded-lg shadow-xl">
                <p class="text-center mt-2 font-semibold">Snap Start</p>
            </div>

            <div class="snap-end flex-shrink-0 w-4/5 md:w-2/3">
                <img src="https://images.unsplash.com/photo-1708922473842-841f35868843?w=500" alt="Mountain" class="w-full h-80 object-cover rounded-lg shadow-xl">
                <p class="text-center mt-2 font-semibold">Snap End</p>
            </div>

        </div>
    </div>

</body>
</html>

Common Pitfalls & Best Practices

Forgetting Container Utilities: The snap-* alignment classes on children will have no effect without the snap-x or snap-y utility on the parent scroll container.
Item Sizing: Snap items need a defined width (for snap-x) or height (for snap-y). Using flex-shrink-0 is crucial in a flex container to prevent items from shrinking to fit.
Scroll Gutter/Padding: Be aware of scroll padding. You can use utilities like scroll-p-4 on the container to add an offset, so items don’t snap directly to the edge of the viewport.
snap-mandatory vs snap-proximity: Use snap-mandatory for a strict snapping experience where the browser must snap to an item. Use snap-proximity for a more gentle snap that only engages when the user stops scrolling near an item.