Tailwind CSS Scroll Snap Align

The scroll-snap-align utility in Tailwind CSS is used to align scroll snap points within a scrolling container. It can be used to specify how the scrolling container should be aligned with respect to its scroll snap points.

Syntax

The scroll-snap-align utility can be used with the following syntax:

<div class="scroll-snap-align-{value}"></div>

Here, {value} is replaced with one of the possible values for the scroll-snap-align property.

Example

<div class="flex flex-row overflow-x-auto snap-x-mandatory scroll-snap-x proximity">
  <div class="min-w-screen flex-shrink-0 h-full relative snap-start bg-blue-500"></div>
  <div class="min-w-screen flex-shrink-0 h-full relative snap-start bg-green-500"></div>
  <div class="min-w-screen flex-shrink-0 h-full relative snap-start bg-red-500"></div>
  <div class="min-w-screen flex-shrink-0 h-full relative snap-start bg-yellow-500"></div>
</div>

Output

The scroll-snap-align utility aligns the scroll snap points within a scrolling container as specified. In the above example, we have used scroll-snap-align-axis property which indicates the scrolling axis.

Explanation

The scroll-snap-align utility is used to align scroll snap points within a scrolling container. This property can be used on either a scrolling container itself or on individual elements within the container to specify their alignment with respect to the snap points.

A scrolling container is an element that has an overflow value of scroll or auto. The element can be scrolled by either dragging the scrollbar or by scrolling with a touchpad or mouse wheel.

The scroll-snap-align property can have one of the following values:

• none - The element is not aligned to a snap point.
• start - The element is aligned to the start of a snap point.
• center - The element is centered on a snap point.
• end - The element is aligned to the end of a snap point.

Use

The scroll-snap-align utility can be used to align scroll snap points within a scrolling container.

By default, elements within a scrolling container will snap to the start of each snap point. Using the scroll-snap-align property, you can align each element differently with respect to the snap points.

You can use the scroll-snap-align property on either the scrolling container itself or on individual elements within the container.

Important Points

• The scroll-snap-align utility specifies how an element should be aligned with respect to the snap points in a scrolling container.
• By default, elements within a scrolling container snap to the start of each snap point.
• The scroll-snap-align property can be used on either the scrolling container itself or on individual elements within the container.

Summary

The scroll-snap-align utility in Tailwind CSS is used to align scroll snap points within a scrolling container. It can be used on either the scrolling container itself or on individual elements within the container to specify how they should be aligned with respect to the snap points. The scroll-snap-align property can have one of four different values (none, start, center, and end) to indicate how an element should be aligned with respect to the snap points. By default, elements within a scrolling container snap to the start of each snap point.