Margin Classes

m-{size}: All sides margin
mx-{size}: Horizontal (left + right)
my-{size}: Vertical (top + bottom)
mt-{size}: Top margin
mr-{size}: Right margin
mb-{size}: Bottom margin
ml-{size}: Left margin
-m-{size}: Negative margin
m-auto: Auto margin (centering)

Padding Classes

p-{size}: All sides padding
px-{size}: Horizontal (left + right)
py-{size}: Vertical (top + bottom)
pt-{size}: Top padding
pr-{size}: Right padding
pb-{size}: Bottom padding
pl-{size}: Left padding

Logical Block-Axis Classes (since v4.2)

mbs-{size} / mbe-{size}: margin-block-start / margin-block-end
pbs-{size} / pbe-{size}: padding-block-start / padding-block-end
Inline-axis counterparts: ms-*/me-*, ps-*/pe-*

Space Between Children

space-x-{size}: Horizontal spacing between flex/grid children
space-y-{size}: Vertical spacing between flex/grid children

Spacing Scale

Tailwind CSS v4.3 uses a configurable spacing scale where --spacing is the base unit (default: 0.25rem/4px). Since v4.3.1, *-0 emits 0 and *-1 emits var(--spacing) instead of a calc().

Class	Value
0	0
px	1px
0.5	calc(var(--spacing) * 0.5) = 0.125rem
1	var(--spacing) = 0.25rem
2	calc(var(--spacing) * 2) = 0.5rem
3	calc(var(--spacing) * 3) = 0.75rem
4	calc(var(--spacing) * 4) = 1rem
6	calc(var(--spacing) * 6) = 1.5rem
8	calc(var(--spacing) * 8) = 2rem
12	calc(var(--spacing) * 12) = 3rem
16	calc(var(--spacing) * 16) = 4rem

Common Patterns

Centered Container

<div class="mx-auto">Centered content</div>

Card with Padding

<div class="p-6 bg-white rounded-lg shadow">Card content</div>

Flex Items with Spacing

<div class="flex space-x-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Stack with Vertical Spacing

<div class="space-y-4">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

See detailed references:

tailwindcss-spacing

Tailwind CSS Spacing Utilities

Quick Reference