Tailwind CSS Scroll Margin

The scroll-margin utility class in Tailwind CSS allows you to set the padding around an element that triggers a scroll snap point. This can be used to prevent the snap element from being clipped by the container, or to add more space to the scroll snap point.

Syntax

The syntax for the scroll-margin utility class is as follows:

.scroll-margin-{size}

• {size}: This is a required parameter that sets the size of the scroll margin. It can be either a length value (in px, em, rem, etc.) or one of the predefined size classes.

Tailwind CSS provides a set of predefined size classes (0, auto, px, 0.5, 1, 1.5, 2, 2.5, 3) that you can use instead of specifying a length value.

Example

Here's an example of how to use the scroll-margin utility class in your HTML:

<div class="scroll-snap-x scroll-margin-3">
  <!-- content -->
</div>

In the example above, we're applying the scroll-margin-3 class to a div element that also has the scroll-snap-x class. This will set a scroll margin of 1.5rem (based on the default font size) around the element.

Output

The scroll-margin utility class will add padding to the element that triggers a scroll snap point. The actual output will depend on the size value you specify.

For example, if you apply the scroll-margin-2 class to a div element, it will add 1rem of padding to the top and bottom of the element, and 2rem of padding to the left and right:

<div class="scroll-margin-2">
  <!-- content -->
</div>

Explanation

The scroll-margin utility class works by setting the padding of the element that triggers a scroll snap point. This allows you to add more space to the scroll snap point, or to prevent it from being clipped by the container.

By default, the padding is applied to all sides of the element. You can use the scroll-margin-{size}-{side} utility classes to set the padding for specific sides:

.scroll-margin-2-top {
  scroll-padding-top: 1rem;
}

.scroll-margin-2-right {
  scroll-padding-right: 2rem;
}

.scroll-margin-2-bottom {
  scroll-padding-bottom: 1rem;
}

.scroll-margin-2-left {
  scroll-padding-left: 2rem;
}

Use

The scroll-margin utility class is useful for creating scrollable elements that snap to specific points. You can use it in combination with the scroll-snap utility classes to create a scrollable carousel, for example:

<div class="scroll-snap-x snap-mandatory scroll-margin-3">
  <div class="flex w-full">
    <div class="w-screen h-screen flex-shrink-0 bg-indigo-500"></div>
    <div class="w-screen h-screen flex-shrink-0 bg-purple-500"></div>
    <div class="w-screen h-screen flex-shrink-0 bg-pink-500"></div>
    <div class="w-screen h-screen flex-shrink-0 bg-green-500"></div>
    <div class="w-screen h-screen flex-shrink-0 bg-orange-500"></div>
    <div class="w-screen h-screen flex-shrink-0 bg-yellow-500"></div>
  </div>
</div>

In the example above, we're using the scroll-snap-x class to enable horizontal scroll snapping, and the snap-mandatory class to enforce snap points. We're also using the scroll-margin-3 class to add extra padding around the snap points.

Important Points

• The scroll-margin utility class adds padding to the element that triggers a scroll snap point.
• The size parameter can be a length value (in px, em, rem, etc.) or one of the predefined size classes (0, auto, px, 0.5, 1, 1.5, 2, 2.5, 3).
• By default, the padding is applied to all sides of the element. You can use the scroll-margin-{size}-{side} utility classes to set the padding for specific sides.

Summary

The scroll-margin utility class in Tailwind CSS allows you to set the padding around an element that triggers a scroll snap point. This can be useful for creating scrollable elements that snap to specific points, or for adding more space to a scroll snap point. You can set the size of the scroll margin using a length value or one of the predefined size classes, and you can use the scroll-margin-{size}-{side} utility classes to set the padding for specific sides.