Tailwind CSS - Scroll Padding

# Tailwind CSS: Mastering Scroll Padding

Scroll padding utilities control the padding within a scroll container’s scrollport. Their primary and most powerful use case is to offset scroll-to-anchor positions to account for sticky elements like headers or navigation bars, ensuring that linked content is never obscured.

## The Problem: Sticky Headers Obscuring Content

Imagine you have a sticky header and a navigation link that jumps to a section further down the page (<a href="#section-b">). When you click the link, the browser scrolls the page so that #section-b is at the very top of the viewport, but your sticky header will cover the section’s title. scroll-padding solves this perfectly.

## Core Scroll Padding Utilities

The utilities follow a familiar pattern: scroll-{p|px|py|pt|...}-{amount}. The {amount} is derived from your theme.spacing scale. These classes should be applied to the element that acts as the scroll container (often the <html> element).

Class	CSS Properties	Common Use Case
scroll-pt-{amount}	scroll-padding-top: ...	The most common utility. Adds padding to the top of the scrollport to offset for a sticky header. Ex: scroll-pt-16.
scroll-p-{amount}	scroll-padding: ...	Sets padding on all four sides of the scrollport.
scroll-px-{amount}	scroll-padding-left/right: ...	Useful for horizontal carousels to provide space at the start and end.
scroll-ps-{amount}	scroll-padding-inline-start: ...	Logical property for left/right padding that respects writing direction (LTR/RTL).

## Practical Application: Sticky Header Navigation

This example demonstrates the primary use case. The <html> element is the scroll container, so we apply scroll-pt-20 and scroll-smooth to it. The h-20 on the header matches the scroll-pt-20 value, creating a perfect offset.

<!DOCTYPE html>
<!-- The scroll container. `scroll-smooth` makes jumps pleasant. -->
<html lang="en" class="scroll-smooth scroll-pt-20">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Padding Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-800">

  <!-- A sticky header that is 5rem (h-20) tall -->
  <header class="sticky top-0 h-20 bg-white/80 backdrop-blur-md shadow-sm z-10">
    <nav class="mx-auto max-w-4xl h-full flex items-center justify-around font-medium">
      <a href="#section-a" class="hover:text-blue-600">Section A</a>
      <a href="#section-b" class="hover:text-blue-600">Section B</a>
      <a href="#section-c" class="hover:text-blue-600">Section C</a>
    </nav>
  </header>

  <main class="mx-auto max-w-4xl p-8 space-y-12">
    <section id="section-a">
      <h2 class="text-2xl font-bold mb-4">Section A</h2>
      <p class="leading-relaxed">...</p>
    </section>

    <section id="section-b">
      <h2 class="text-2xl font-bold mb-4">Section B</h2>
      <p class="leading-relaxed">When you click the link for 'Section B', the `scroll-pt-20` on the `<html>` tag ensures this heading isn't hidden behind the sticky header. Try removing it to see the difference!</p>
      <div class="h-96 bg-gray-200 rounded-lg mt-4"></div>
    </section>

    <section id="section-c">
      <h2 class="text-2xl font-bold mb-4">Section C</h2>
      <p class="leading-relaxed">...</p>
    </section>
  </main>

</body>
</html>

## Advanced Use Case: Scroll Snap Carousel

Scroll padding is also essential for creating clean scroll-snapping interfaces. The scroll-px utility provides padding at the beginning and end of the scroll container, so the first and last items can snap to the center of the viewport.

<div class="flex snap-x snap-mandatory overflow-x-auto scroll-px-6">
  <!-- The `scroll-px-6` provides the necessary start/end padding -->
  <div class="w-4/5 flex-shrink-0 snap-center p-4">
    <div class="h-48 rounded-lg bg-blue-300"></div>
  </div>
  <div class="w-4/5 flex-shrink-0 snap-center p-4">
    <div class="h-48 rounded-lg bg-green-300"></div>
  </div>
  <div class="w-4/5 flex-shrink-0 snap-center p-4">
    <div class="h-48 rounded-lg bg-yellow-300"></div>
  </div>
</div>

## Customization and Arbitrary Values

If your sticky header has a height that doesn’t align with your spacing scale, you can easily use an arbitrary value. This is a common and highly effective technique.

<!-- If your header is exactly 68px tall -->
<html class="scroll-pt-[68px]">
  ...
</html>