~/
Core Utilities
Quiz
...

Core Utilities

beginner · updated Tue Sep 22 2026Contribute

Spacing, sizing, color, and typography classes you will use daily.

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.