~/
Core Utilities
Quiz
...

Core Utilities

beginner · updated Tue Sep 22 2026Contribute

Master the essential Tailwind CSS spacing, sizing, color, and typography classes you will use daily to build modern, responsive web interfaces.

Core Utilities

Most Tailwind classes fall into a few families. Learn the naming pattern and you can guess almost any class.

Spacing

Padding uses p, margin uses m, with a direction suffix:

<div class="p-4">all sides</div>
<div class="px-4 py-2">x (horizontal) and y (vertical)</div>
<div class="pt-6 pb-2 pl-4 pr-4">individual sides</div>
<div class="mt-4 mb-8">margin top and bottom</div>

The number maps to a spacing scale: 1 = 0.25rem, 2 = 0.5rem, 4 = 1rem, 8 = 2rem.

Sizing

<div class="w-full max-w-md h-64">...</div>
<img class="w-16 h-16 rounded-full" />
<div class="min-h-screen">...</div>
  • w-* width, h-* height.
  • Fractions like w-1/2 are percentages.
  • max-w-* and min-h-* set bounds.

Color

Colors come in a shade scale from 50 (lightest) to 950 (darkest):

<p class="text-gray-700">Text</p>
<div class="bg-blue-500">Background</div>
<div class="border border-red-300">Border</div>

Common properties: text-* (color), bg-* (background), border-* (border color).

Typography

<h1 class="text-3xl font-bold tracking-tight">Title</h1>
<p class="text-base leading-relaxed text-gray-600">Body copy</p>
<p class="text-sm uppercase tracking-wide">Label</p>
  • text-* — size (text-sm, text-xl) or color.
  • font-* — weight (font-medium, font-bold) or family.
  • leading-* — line height; tracking-* — letter spacing.
  • text-left, text-center, text-right — alignment.

Borders & Radius

<div class="rounded-lg border border-gray-200 p-4">Card</div>
<div class="rounded-full">Pill</div>

Shadows & Effects

<div class="shadow-sm">Subtle</div>
<div class="shadow-lg">Prominent</div>
<div class="opacity-50">Faded</div>

Display

<span class="hidden">not shown</span>
<div class="flex">flex container</div>
<div class="block">block</div>

Best Practices

  1. Stay on the scale — p-4 over p-[15px].
  2. Group by property — Readable class order: layout, spacing, color, typography.
  3. Use semantic shade pairs — bg-gray-50 with text-gray-900 for contrast.
  4. Check contrast — Light text on light backgrounds fails accessibility.

Common Mistakes

  1. Confusing text-* — It sets both size and color depending on the value.
  2. Forgetting the shade — text-red is not a class; use text-red-500.
  3. Mixing spacing directions — px and pl fight; pick one.
  4. Overriding with ! — Fix the class order instead.