Core Utilities

The spacing scale#

Tailwind's spacing utilities (padding, margin, width, height, gap) all share one consistent numeric scale, where each step is 0.25rem (4px):

<div class="p-4">Padding on all sides</div>
<div class="px-6 py-2">Horizontal 6, vertical 2</div>
<div class="pt-4 pr-2 pb-4 pl-2">Individual sides</div>
<div class="m-4">Margin on all sides</div>
<div class="mt-8">Margin-top only</div>
<div class="mx-auto">Horizontally centered via auto margins</div>

The prefix tells you the property, the suffix tells you the side:

• p = padding, m = margin
• t/r/b/l = top/right/bottom/left, x = left+right, y = top+bottom
• No letter after p/m = all four sides

Because every spacing utility draws from the same scale, p-4, m-4, gap-4, and w-4 are all internally consistent multiples of the same base unit — this is what keeps a Tailwind-built UI visually consistent almost by default, without a design system being enforced manually.

Typography#

<h1 class="text-4xl font-bold text-gray-900">Page Title</h1>
<h2 class="text-2xl font-semibold text-gray-800">Section Heading</h2>
<p class="text-base text-gray-600 leading-relaxed">
    Body copy with comfortable line height.
</p>
<p class="text-sm text-gray-400 italic">Fine print</p>

Colors#

Every color utility follows the pattern {property}-{color}-{shade}, where shades run from 50 (near-white) to 950 (near-black):

<div class="bg-blue-500 text-white">Solid blue background, white text</div>
<div class="bg-red-50 text-red-700 border border-red-200">A soft error banner</div>
<p class="text-gray-500">Muted secondary text</p>

<!-- A common alert pattern combining background, text, and border shades from the same hue -->
<div class="bg-green-50 border border-green-200 text-green-800 p-4 rounded-md">
    Your changes have been saved.
</div>

Using different shades of the same hue for background/border/text (rather than picking arbitrary colors) is what keeps components looking coherent — Tailwind's default palette is deliberately built so any two shades of one color already work together.

Layout: flex, grid, width/height#

<div class="flex items-center justify-between gap-4">
    <span>Left</span>
    <span>Right</span>
</div>

<div class="grid grid-cols-3 gap-4">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

<div class="w-full md:w-1/2 h-64">
    Full width on mobile, half width from md breakpoint up, fixed height
</div>

These map directly onto the plain-CSS concepts from the CSS Flexbox and Grid tutorials — flex is display: flex, items-center is align-items: center, justify-between is justify-content: space-between, grid-cols-3 is grid-template-columns: repeat(3, 1fr). Learning Tailwind is mostly learning the names Tailwind gives to CSS properties you likely already know.

Putting it together: a card component#

<article class="flex gap-4 p-6 bg-white rounded-lg shadow border border-gray-100">
    <img src="/avatar.jpg" alt="" class="w-12 h-12 rounded-full">
    <div class="flex-1">
        <h3 class="text-lg font-semibold text-gray-900">Jane Doe</h3>
        <p class="text-sm text-gray-500">Posted 2 hours ago</p>
        <p class="mt-2 text-gray-700 leading-relaxed">
            Just shipped a new feature using Tailwind's utility classes.
        </p>
    </div>
</article>

Common mistakes#

• Memorizing individual utilities in isolation instead of learning the underlying scale (spacing, sizing, color shades) — once the scale clicks, guessing the right class name becomes far easier than looking every one up.
• Mixing arbitrary one-off colors (bg-[#3b82f6]) everywhere instead of the default theme's color/shade scale — arbitrary values are a useful escape hatch, but overusing them defeats Tailwind's built-in design consistency.
• Forgetting flex-1 (or an explicit width) on a flex child that should grow to fill remaining space — without it, the element only takes its natural content width.