Tailwind CSS Spacing: How the Scale Works

Spacing is one of Tailwind CSS's core design scales. It powers more than padding and margin: width, height, gap, space between children, and many fixed sizes can all use the same spacing values.

That shared scale is why Tailwind layouts often feel consistent when used carefully.

The default spacing idea

Tailwind's spacing scale is commonly based around 0.25rem, which often equals 4px when the root font size is 16px.

Common examples:

This does not mean you should constantly convert everything to pixels. Use the scale as a design constraint.

Padding and margin

<div class="p-4">padding on all sides</div>
<div class="pt-6">padding top</div>
<div class="px-8">left and right padding</div>

<div class="m-2">margin on all sides</div>
<div class="mt-10">margin top</div>
<div class="mx-auto">horizontal auto margin</div>

Prefer consistent spacing tokens over one-off pixel values. A page with p-4, md:p-6, and lg:p-8 is easier to maintain than a page where every section invents new numbers.

Width, height, and gap

Spacing values also appear in classes such as:

<div class="grid gap-6">
  <!-- cards -->
</div>

<div class="h-16 w-32">
  fixed size
</div>

For grids and lists, gap-* is usually cleaner than adding margin to each child. It avoids edge cleanup and works naturally with grid and flex layouts.

Responsive spacing

Desktop spacing can feel oversized on mobile. Use responsive variants:

<main class="px-4 py-6 md:px-8 lg:px-12">
  ...
</main>

Base classes apply first, then md: and lg: override at larger breakpoints.

Extending the scale

If the default scale is not enough, extend it deliberately:

module.exports = {
  theme: {
    extend: {
      spacing: {
        72: "18rem",
        84: "21rem",
        96: "24rem",
      },
    },
  },
}

Most projects should extend rather than replace the default spacing scale. Replacing it can break team expectations and older components.

Arbitrary values

Tailwind supports arbitrary values:

<div class="p-[18px]">
  custom padding
</div>

Use this for genuine exceptions, not as the default style habit. If every spacing value is arbitrary, the project loses the consistency that made Tailwind useful.

Practical rules

1. Start page gutters with px-4, then adjust with responsive variants.
2. Use gap-* for lists and grids before child margins.
3. Use common card padding such as p-4, p-5, or p-6.
4. Add new scale values only when a repeated design need exists.
5. Keep arbitrary values rare and explain them when they encode a real constraint.

Related FreeMac guides

• For Tailwind setup, read Tailwind CSS 4 Guide: Setup, Theme, and Responsive Design.
• For rem and root font size, read What is rem in CSS? Why 1rem Often Equals 16px.
• For component extraction, read React Component Design: Composition, Abstraction, and Reuse.