Tailwind Spacing (Margin & Padding) Guide

April 16, 2026
No Comments

Understanding Tailwind Spacing Scale

Tailwind uses a predefined spacing scale (like 0, 1, 2, 4, 6, 8...) which represents values in rem. This helps maintain consistent spacing across your design.

Example:

<div class=“p-4 bg-blue-200”>
Padding 4 (1rem)
</div>

Applying Margin (m-*)

Margin controls the outer space around elements. You can use m-* for all sides or specific directions like mt (top), mb (bottom), ml, mr.

Example:

<div class=“m-6 bg-green-200 p-4”>
Margin applied on all sides
</div>

Applying Padding (p-*)

Padding controls the inner space inside elements. Similar to margin, you can apply it to all sides or specific directions.

Example:

<div class=“p-6 bg-yellow-200”>
Padding inside the box
</div>

Directional Spacing (mx, my, px, py)

Tailwind provides shorthand utilities for horizontal (x) and vertical (y) spacing, making your code cleaner and easier to read.

Example:

<div class=“px-8 py-4 bg-purple-200”
Horizontal & Vertical Padding
</div>

Responsive Spacing (sm:, md:, lg:)

You can adjust spacing based on screen size using responsive prefixes. This helps create mobile-friendly layouts.

Example:

<div class=“p-2 md:p-6 bg-pink-200”>
Small padding on mobile, larger on desktop
</div>