Spacing, Sizing, and Containers

Spacing, Sizing, and Containers

Consistent spacing and sizing are the foundation of a polished UI. Tailwind provides a carefully designed spacing scale that maps numbers to rem values, ensuring visual rhythm across your entire application.

The Tailwind spacing scale

The default spacing scale uses multiples of 0.25rem:

This scale applies to padding (p-*), margin (m-*), gap (gap-*), width (w-*), height (h-*), and other spacing-related properties.

Padding utilities

<!-- All sides -->
<div class="p-4">All sides: 1rem</div>
<div class="p-6">All sides: 1.5rem</div>
<div class="p-0">No padding</div>

<!-- Horizontal and vertical axes -->
<div class="px-4 py-2">Horizontal 1rem, vertical 0.5rem</div>
<div class="px-6 py-4">Horizontal 1.5rem, vertical 1rem</div>

<!-- Individual sides -->
<div class="pt-8">Top only: 2rem</div>
<div class="pr-4">Right only: 1rem</div>
<div class="pb-6">Bottom only: 1.5rem</div>
<div class="pl-3">Left only: 0.75rem</div>

<!-- Start/end (logical properties, RTL-aware) -->
<div class="ps-4 pe-4">Padding start and end (adapts for RTL)</div>

Margin utilities

<!-- Standard margins -->
<div class="mt-8 mb-4">Top 2rem, bottom 1rem</div>
<div class="mx-auto">Center horizontally (auto left and right)</div>

<!-- Negative margins (for overlapping elements) -->
<img class="-mt-12 rounded-full border-4 border-white w-24 h-24" src="/avatar.jpg" alt="Avatar" />

<!-- Auto margins for flex children alignment -->
<nav class="flex items-center">
  <span class="font-bold">Logo</span>
  <span class="ml-auto text-sm text-gray-500">Version 4.2</span>
</nav>

Consistent sibling spacing with space-*

Instead of adding mt-4 to every child element, you can add space-y-4 to the parent. This adds margin-top to every child except the first.

<!-- Instead of this: -->
<form>
  <div class="mt-4"><input .../></div>
  <div class="mt-4"><input .../></div>
  <div class="mt-4"><input .../></div>
</form>

<!-- Do this: -->
<form class="space-y-4">
  <div><input class="w-full border rounded-lg px-3 py-2" placeholder="Name" /></div>
  <div><input class="w-full border rounded-lg px-3 py-2" placeholder="Email" /></div>
  <div><input class="w-full border rounded-lg px-3 py-2" placeholder="Message" /></div>
</form>

<!-- Works for horizontal spacing too -->
<div class="flex space-x-3">
  <button class="px-4 py-2 bg-indigo-600 text-white rounded">Save</button>
  <button class="px-4 py-2 border rounded">Cancel</button>
</div>

Width utilities

<!-- Fixed widths from the spacing scale -->
<div class="w-8">2rem wide</div>
<div class="w-16">4rem wide</div>
<div class="w-48">12rem wide</div>
<div class="w-64">16rem wide</div>

<!-- Percentage widths -->
<div class="w-1/2">50%</div>
<div class="w-1/3">33.33%</div>
<div class="w-2/3">66.66%</div>
<div class="w-3/4">75%</div>
<div class="w-full">100%</div>

<!-- Viewport widths -->
<div class="w-screen">100vw</div>

<!-- Max-width constraints (essential for containers) -->
<div class="max-w-sm">28rem max</div>
<div class="max-w-md">28rem max</div>
<div class="max-w-lg">32rem max</div>
<div class="max-w-xl">36rem max</div>
<div class="max-w-2xl">42rem max</div>
<div class="max-w-4xl">56rem max</div>
<div class="max-w-7xl">80rem max</div>
<div class="max-w-full">100%</div>
<div class="max-w-none">No max-width</div>

<!-- Fit to content -->
<div class="w-fit">Shrinks to content width</div>
<div class="w-max">As wide as content needs</div>
<div class="w-min">As narrow as possible</div>

Height utilities

<!-- Fixed heights -->
<div class="h-8">2rem tall</div>
<div class="h-48">12rem tall</div>
<div class="h-screen">100vh</div>
<div class="h-full">100% of parent</div>
<div class="h-dvh">100dvh (dynamic viewport, accounts for mobile browser chrome)</div>

<!-- Min and max heights -->
<div class="min-h-screen">At least full viewport</div>
<div class="min-h-0">Override inherited min-height</div>
<div class="max-h-64 overflow-y-auto">Scrolls after 16rem</div>

Aspect ratio

The aspect-* utilities maintain a fixed width-to-height ratio regardless of the element's actual width.

<!-- Common aspect ratios -->
<div class="aspect-square">1:1 (perfect square)</div>
<div class="aspect-video">16:9 (widescreen video)</div>

<!-- Arbitrary aspect ratios -->
<div class="aspect-[4/3]">4:3 (classic photo)</div>
<div class="aspect-[3/4]">3:4 (portrait photo)</div>
<div class="aspect-[21/9]">21:9 (ultrawide)</div>

<!-- Practical: responsive image with preserved ratio -->
<div class="aspect-video w-full rounded-xl overflow-hidden bg-gray-900">
  <img src="/thumbnail.jpg" alt="Video thumbnail" class="w-full h-full object-cover" />
</div>

<!-- Avatar squares -->
<img src="/avatar.jpg" alt="User" class="aspect-square w-16 rounded-full object-cover" />

The container pattern

For page-level containers, the most reliable and common pattern is:

<!-- Standard page container -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  <!-- Page content -->
</div>

<!-- Narrower container for text-heavy pages -->
<div class="max-w-3xl mx-auto px-4 sm:px-6">
  <!-- Article or blog content -->
</div>

<!-- Full bleed with constrained inner content -->
<section class="bg-indigo-600">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    <!-- Content stays centered while background is full width -->
  </div>
</section>

Custom spacing with @theme

If the default scale does not have the exact value you need, add it to @theme:

@import "tailwindcss";

@theme {
  /* Adds p-18, m-18, w-18, h-18, gap-18, etc. */
  --spacing-18: 4.5rem;
  --spacing-22: 5.5rem;
  --spacing-30: 7.5rem;
}

These integrate seamlessly with all spacing utilities, breakpoint modifiers, and hover/focus variants.

Practice

1. Build a modal dialog: centered vertically and horizontally with a max-width of max-w-md, padding p-6, rounded corners rounded-2xl, and a scrollable body with max-h-96 overflow-y-auto.
2. Create a sidebar that is exactly w-64 and full-height min-h-screen, with space-y-1 between navigation items.
3. Build a avatar group: 5 circular avatars with w-10 h-10, overlapping using negative margins (-ml-3).