Tailwind CSS - Scroll Snap Align

Previous
Quiz
Next

Tailwind CSS Scroll Snap Align is a collection of predefined classes that control how scrollable items align within a container.

Tailwind CSS Scroll Snap Align Classes

Below is a list of Tailwind CSS Scroll Snap Align classes for managing how scrollable items align within their container.

Class CSS Properties
snap-start pointer-events: none;
snap-end scroll-snap-align: end;
snap-center scroll-snap-align: center;
snap-align-none scroll-snap-align: none;

Functionality of Tailwind CSS Scroll Snap Align Classes

  • snap-start: Aligns the start of the item with the start of the container.
  • snap-end: Aligns the end of the item with the end of the container.
  • snap-center: Centers the item within the container.
  • snap-align-none: Disables scroll snapping for the item.

Tailwind CSS Scroll Snap Align Class Examples

Below are examples of Tailwind CSS Scroll Snap Align classes, showing how each class affects the alignment of elements within a scrollable container.

Snap Start Alignment with Tailwind CSS

This example shows the use of Tailwind CSS Scroll Snap Align classes. The snap-start class aligns items to the start of the container when scrolling. This means that as you scroll through the items, each item will snap to the left edge of the viewport or container.

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 Align
    </h2>
    <h3 class="text-lg font-semibold mt-4">Snap Start</h3>
    <div class="flex overflow-x-auto snap-x snap-mandatory">
        <div class="flex-shrink-0 w-72 h-24 bg-red-500 snap-start">Item 1</div>
        <div class="flex-shrink-0 w-72 h-24 bg-blue-500 snap-start">Item 2</div>
        <div class="flex-shrink-0 w-72 h-24 bg-green-500 snap-start">Item 3</div>
        <div class="flex-shrink-0 w-64 h-24 bg-yellow-500 snap-start">Item 4</div>
    </div>
    <p class="mt-2 text-center">With <strong>snap-start</strong>, 
        items align to the left.
    </p>
</body>

</html>

Snap Center Alignment with Tailwind CSS

This example shows the use of thesnap-center class in Tailwind CSS, which centers items within the container when scrolling.

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 Align
    </h2>
    <h3 class="text-lg font-semibold mt-4">Snap Center</h3>
    <div class="flex overflow-x-auto snap-x snap-mandatory">
        <div class="flex-shrink-0 w-72 h-24 bg-red-500 snap-center">Item 1</div>
        <div class="flex-shrink-0 w-72 h-24 bg-blue-500 snap-center">Item 2</div>
        <div class="flex-shrink-0 w-72 h-24 bg-green-500 snap-center">Item 3</div>
        <div class="flex-shrink-0 w-72 h-24 bg-yellow-500 snap-center">Item 4</div>
    </div>
    <p class="mt-2 text-center">With <strong>snap-center</strong>,
        items align to the center.
    </p>
</body>

</html>

Snap End Alignment with Tailwind CSS

This example shows the snap-end class in Tailwind CSS, which aligns items to the end (right edge) of the container when scrolling.

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 Align
    </h2>
    <h3 class="text-lg font-semibold mt-4">Snap End</h3>
    <div class="flex overflow-x-auto snap-x snap-mandatory">
        <div class="flex-shrink-0 w-52 h-24 bg-red-500 snap-end">Item 1</div>
        <div class="flex-shrink-0 w-52 h-24 bg-blue-500 snap-end">Item 2</div>
        <div class="flex-shrink-0 w-52 h-24 bg-green-500 snap-end">Item 3</div>
        <div class="flex-shrink-0 w-52 h-24 bg-yellow-500 snap-end">Item 4</div>
    </div>
    <p class="mt-2 text-center">With <strong>snap-end</strong>, 
        items align to the right.
    </p>
</body>

</html>
Print Page
Previous
Next