0
0
Tailwindmarkup~5 mins

Scroll-snap containers in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Scroll-snap containers help you control how scrolling stops on a page. They make scrolling feel smooth and neat by snapping to specific points.

When you want to create a photo gallery that snaps to each picture as you scroll.
When building a product showcase that scrolls horizontally and stops on each item.
When making a step-by-step tutorial where each step snaps into view.
When designing a carousel that should stop exactly on each slide.
When you want to improve user experience by avoiding awkward partial scrolls.
Syntax
Tailwind
scroll-snap-type: <axis> <mandatory | proximity>;
scroll-snap-align: <start | center | end>;

scroll-snap-type goes on the container that scrolls.

scroll-snap-align goes on the child elements inside the container.

Examples
Scroll horizontally and snap exactly at the start of each child.
Tailwind
scroll-snap-type: x mandatory;
scroll-snap-align: start;
Scroll vertically and snap near the center of each child if close enough.
Tailwind
scroll-snap-type: y proximity;
scroll-snap-align: center;
Scroll both directions and snap exactly at the end of each child.
Tailwind
scroll-snap-type: both mandatory;
scroll-snap-align: end;
Sample Program

This example creates a horizontal scroll container with three colored slides. The container uses Tailwind's scroll snap classes to snap horizontally to each slide's start edge. You can scroll sideways and the view will stop exactly at each slide.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Tailwind Scroll Snap Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center min-h-screen bg-gray-100">
  <div class="w-80 h-48 overflow-x-auto scroll-snap-x-mandatory flex border border-gray-300 rounded-lg bg-white">
    <div class="flex-none w-80 h-48 scroll-snap-align-start bg-red-400 flex items-center justify-center text-white text-2xl font-bold">Slide 1</div>
    <div class="flex-none w-80 h-48 scroll-snap-align-start bg-green-400 flex items-center justify-center text-white text-2xl font-bold">Slide 2</div>
    <div class="flex-none w-80 h-48 scroll-snap-align-start bg-blue-400 flex items-center justify-center text-white text-2xl font-bold">Slide 3</div>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Tailwind uses special classes like scroll-snap-x-mandatory for scroll-snap-type: x mandatory;.

Make sure the container has overflow-auto or overflow-scroll to enable scrolling.

Each child inside the container needs a scroll snap alignment class like scroll-snap-align-start.

Summary

Scroll-snap containers control where scrolling stops for a smooth experience.

Use scroll-snap-type on the container and scroll-snap-align on children.

Tailwind provides easy classes to add scroll snapping without writing custom CSS.