Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Scroll Snap Type

Quiz

Tailwind CSS Scroll Snap Type is a collection of predefined classes that control the specific points where scrolling stops and aligns within a container.

Tailwind CSS Scroll Snap Type Classes

Below is a list of Tailwind CSS Scroll Snap Type classes for controlling how scrolling snaps to specific points within a container.

Class	CSS Properties
snap-none	scroll-snap-type: none;
snap-x	scroll-snap-type: x var(--tw-scroll-snap-strictness);
snap-y	scroll-snap-type: y var(--tw-scroll-snap-strictness);
snap-both	scroll-snap-type: both var(--tw-scroll-snap-strictness);
snap-mandatory	--tw-scroll-snap-strictness: mandatory;
snap-proximity	--tw-scroll-snap-strictness: proximity;

Functionality of Tailwind CSS Scroll Snap Type Classes

snap-none: Disables alignment, allowing free scrolling.
snap-x: Aligns elements horizontally as you scroll.
snap-y: Aligns elements vertically as you scroll.
snap-both: Aligns elements both horizontally and vertically.
snap-mandatory: Always aligns to the nearest snap point during scrolling.
snap-proximity: Aligns to the nearest snap point when you scroll close to it.

Tailwind CSS Scroll Snap Type Class Examples

Below are examples of Tailwind CSS Scroll Snap Type classes, showing how they control the specific points where scrolling stops and aligns within a container.

Horizontal Scroll Snapping with Tailwind CSS

This example shows how to use Tailwind CSS Scroll Snap Type classes. The following code applies the snap-x class to enable horizontal scroll snapping and sets the scroll snap alignment for the child elements. As you scroll horizontally, each item aligns neatly with the scroll snap points.

Example

  
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl font-bold mb-4">
        Tailwind CSS Scroll Snap Type
    </h2>  
    <h2 class="text-xl font-bold mb-4">scroll-snap-x</h2>
    <div class="flex overflow-x-auto snap-x gap-4 mb-4">
        <div class="snap-center flex-shrink-0 w-96 h-32 
                    bg-red-500 text-white flex items-center justify-center">
                Block A
        </div>
        <div class="snap-center flex-shrink-0 w-96 h-32 
                    bg-blue-500 text-white flex items-center justify-center">
                Block B
        </div>
        <div class="snap-center flex-shrink-0 w-96 h-32 
                    bg-green-500 text-white flex items-center justify-center">
                Block C
        </div>
    </div>
    <p class="text-center">With <strong>snap-x</strong>, 
        items align horizontally while scrolling.
    </p>
</body>

</html>

Tailwind CSS Mandatory Snap Points

This example shows how to use Tailwind CSS Scroll Snap Type Classes by using the snap-mandatory class, which ensures that as you scroll horizontally, the items always align to the nearest snap point, improving visual alignment.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl font-bold mb-2">
        Tailwind CSS Scroll Snap Type
    </h2>
    <h2 class="text-xl font-bold mb-4">scroll-snap-mandatory</h2>
    <div class="flex overflow-x-auto snap-x snap-mandatory gap-4 mb-4">
        <div class="snap-center flex-shrink-0 w-96 h-32 bg-red-500 
                    text-white flex items-center justify-center">
                Block A
        </div>
        <div class="snap-center flex-shrink-0 w-96 h-32 bg-blue-500 
                    text-white flex items-center justify-center">
                Block B
        </div>
        <div class="snap-center flex-shrink-0 w-96 h-32 bg-green-500 
                    text-white flex items-center justify-center">
                Block C
        </div>
    </div>
    <p class="text-center">With <strong>snap-mandatory</strong>, 
        items will always snap to the nearest point.
    </p>
</body>

</html>

Tailwind CSS Scroll Alignment with Snap Proximity

This example shows the snap-proximity class, which ensures that items snap to the closest point as you scroll horizontally. When you get near a snap point, the scrolling aligns the items to that point, providing a smoother scroll experience.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl font-bold mb-2">
        Tailwind CSS Scroll Snap Type
    </h2>
    <h2 class="text-xl font-bold mb-4">scroll-snap-proximity</h2>
    <div class="flex overflow-x-auto snap-x snap-proximity gap-4 mb-4">
        <div class="snap-center flex-shrink-0 w-96 h-32 bg-red-500 
                    text-white flex items-center justify-center">
                Block X
        </div>
        <div class="snap-center flex-shrink-0 w-96 h-32 bg-blue-500 
                    text-white flex items-center justify-center">
                Block Y
        </div>
        <div class="snap-center flex-shrink-0 w-96 h-32 bg-green-500 
                    text-white flex items-center justify-center">
                Block Z
        </div>
    </div>
    <p class="text-center">With <strong>snap-proximity</strong>,
        items align to the nearest point when close.
    </p>
</body>

</html>

Vertical Snap Scrolling with Mandatory Alignment

This example shows how to use Tailwind CSS Scroll Snap Type classes. The following code applies the snap-y with snap-mandatory, making vertical scrolling smooth and precise. As you scroll through the items, each one will snap neatly into place, ensuring a consistent and orderly view.

Example

  
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl font-bold mb-2">
        Tailwind CSS Scroll Snap Type
    </h2>
    <h2 class="text-xl font-bold mb-4">
        scroll-snap-y with snap-mandatory 
    </h2>
    <div class="flex flex-col overflow-y-auto snap-y 
        snap-mandatory gap-4 h-44">
        <div class="snap-center flex-shrink-0 w-72 h-28 bg-red-500 
                    text-white flex items-center justify-center">
                Block A
        </div>
        <div class="snap-center flex-shrink-0 w-72 h-28 bg-blue-500 
                    text-white flex items-center justify-center">
                Block B
        </div>
        <div class="snap-center flex-shrink-0 w-72 h-28 bg-green-500 
                    text-white flex items-center justify-center">
                Block C
        </div>
         <div class="snap-center flex-shrink-0 w-72 h-28 bg-green-500 
                    text-white flex items-center justify-center">
                Block D
        </div>
    </div>
    <p class="text-center">With <strong>snap-y</strong> and 
        <strong>snap-mandatory</strong>, items align 
        vertically and always snap to a point.
    </p>
</body>

</html>

Print Page