Tailwind Spacing, Sizing, and Color System

Tailwind's spacing and sizing system uses a numeric scale where each unit equals 0.25rem (4px at browser defaults). This scale is shared by padding, margin, width, height, and gap.

Spacing scale

<!-- p-4 = padding: 1rem -->
<div class="p-4">padded</div>

<!-- px-6 py-3 = horizontal + vertical padding -->
<button class="px-6 py-3">Click me</button>

<!-- mt-8 = margin-top: 2rem -->
<section class="mt-8">section</section>

Sizing

<div class="w-full h-screen"></div>
<div class="w-1/2 h-64"></div>
<div class="max-w-xl mx-auto"></div>

Color system

Colors use a name-shade pattern. Shades run 50 (lightest) to 950 (darkest). The 500 shade is the base, 600-900 darker, 100-400 lighter.

<p class="text-gray-700 bg-blue-50 border border-blue-200">
  Styled paragraph
</p>

<button class="bg-indigo-600 text-white hover:bg-indigo-700">
  Save
</button>

Built-in palettes: slate, gray, red, orange, yellow, green, blue, indigo, violet, purple, pink, rose. Each has 11 shades. One color token generates bg-, text-, and border- variants automatically.