Scroll Snap Type

Utilities for controlling how strictly snap points are enforced in a snap container.

Use the utility to enable horizontal scroll snapping within an element.

For scroll snapping to work, you need to also set the on the children within the element.

Scroll in the grid of images to see the expected behaviour

Use the snap-mandatory utility to force a snap container to always come to rest on a snap point.

Scroll in the grid of images to see the expected behaviour

Use the utility to make a snap container come to rest on snap points that are close in proximity. This is the browser default.

Scroll in the grid of images to see the expected behaviour

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:snap-x to only apply the utility on hover.

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:snap-x to apply the utility at only medium screen sizes and above.