Explain Tailwind's spacing scale and how it works

Beginner

Answer

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

  • 0 = 0px
  • 1 = 0.25rem (4px)
  • 2 = 0.5rem (8px)
  • 4 = 1rem (16px)
  • 8 = 2rem (32px)
  • 16 = 4rem (64px)

Examples:

  • p-4 = padding: 1rem
  • m-8 = margin: 2rem
  • space-x-4 = gap of 1rem between child elements horizontally

This scale provides consistent spacing throughout your design.