Question 1

How does Tailwind's spacing scale work?

Accepted Answer

Tailwind uses a numeric scale where each unit equals 0.25rem (4px at default browser settings). So p-4 is 1rem (16px), m-8 is 2rem (32px). The scale includes values from 0 to 96, plus fractional values like 0.5, 1.5, 2.5, and 3.5.

Question 2

What's the difference between margin and padding?

Accepted Answer

Padding (p-*) creates space inside an element, between its content and border. Margin (m-*) creates space outside an element, between its border and neighboring elements. Use padding for internal spacing, margin for layout spacing.

Question 3

When should I use gap vs margin?

Accepted Answer

Use gap with flexbox or grid layouts (gap-4, gap-x-2, gap-y-4) for consistent spacing between children. Use margin for spacing between unrelated elements or when you need asymmetric spacing.

Question 4

How do I create a custom spacing scale?

Accepted Answer

Extend Tailwind's spacing in tailwind.config.js under theme.extend.spacing. You can add custom values like '18': '4.5rem' or completely replace the scale if needed for your design system.

Spacing Visualizer

Micro (0-3)

Small (4-8)

Medium (9-16)

Large (20-48)

XL (52+)

You might also like

Box Model Visualizer

Typography Scale