Tailwind spacing scale

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

beginner

This lesson

This lesson teaches Tailwind spacing scale—the ideas, syntax, and habits you need before moving on in Tailwind CSS.

Config-driven utilities are how most greenfield product CSS is written today.

You will apply Tailwind spacing scale in contexts like: React/Vue/Next apps, marketing sites, design systems, and rapid prototypes where consistency and speed matter.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Tailwind spacing scale in your own words.

Tailwind’s spacing scale uses numeric keys mapped to rem: 1 = 0.25rem, 2 = 0.5rem, 4 = 1rem, 8 = 2rem. The scale is intentionally limited so teams stop debating random pixel values.

Why a scale beats ad hoc pixels

When every developer picks their own padding, interfaces look subtly “off.” A shared scale—similar to tokens in Utility CSS spacing—keeps vertical rhythm consistent across pages.

Common keys

p-2, gap-2 — tight inline clusters
p-4, gap-4 — default card padding
p-6, py-8 — section spacing

Self-check

What rem value does p-4 typically represent?
Why might you choose gap-3 over gap-3.5 in a design system?

Challenge

Feel the scale

Duplicate a box and change p-4 to p-8.
Compare gap-2 vs gap-6 in a flex row.

Done when: two clearly different spacing rhythms are visible.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

Which spacing step felt too tight or too loose?
How would you map your design system to the scale?

No discussion yet. Be the first to ask a question.