How does Spacing work in Tailwind CSS?

Understanding padding, margin, and gap utilities.

What You'll Learn

Spacing scale
Padding and margin
Directional spacing

Spacing Scale

Tailwind uses a consistent spacing scale based on 0.25rem (4px):

Class	Size
p-1	0.25rem (4px)
p-2	0.5rem (8px)
p-4	1rem (16px)
p-8	2rem (32px)

Directional Utilities

index.htmlHTML

<div class="pt-4 pb-2 px-6 my-8">
  <!-- pt = padding-top -->
  <!-- pb = padding-bottom -->
  <!-- px = padding left & right -->
  <!-- my = margin top & bottom -->
</div>

Shorthand

Prefix	Applies to
p-	all sides
px-	left & right
py-	top & bottom
pt-, pr-, pb-, pl-	single side

Negative Margins

index.htmlHTML

<div class="-mt-4">Pulls up by 1rem</div>

How to use CSS Grid in Tailwind?

How to use Colors in Tailwind CSS?