Core utilities you'll use every day

You don't need to memorise all of Tailwind. These categories cover the vast majority of UI work.

Layout

<!-- Flexbox row, centered content, gap between children -->
<div class="flex items-center gap-4">

<!-- Grid with responsive columns -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

Key classes: flex, grid, items-center, justify-between, gap-{n}, w-full, max-w-{size}, mx-auto

Spacing

Tailwind uses a 4px base unit. p-1 = 4px, p-4 = 16px, p-6 = 24px.

<div class="px-6 py-4 mt-8 mb-2">

p = padding all sides, px/py = horizontal/vertical, pt/pb/pl/pr = individual sides. Same pattern for margin with m.

Typography

<h1 class="text-4xl font-bold tracking-tight text-gray-900">
<p class="text-base text-muted-foreground leading-relaxed">

Key classes: text-{size}, font-{weight}, leading-{value}, tracking-{value}, text-{color}

Colours

Tailwind ships a full colour palette. Each colour has shades from 50 (lightest) to 950 (darkest):

<div class="bg-blue-500 text-white">
<div class="bg-gray-50 text-gray-900">

Borders & Backgrounds

<div class="border border-gray-200 rounded-xl bg-white">
<div class="rounded-full bg-primary/10">  <!-- opacity modifier -->

A practical card example

<div class="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
  <h3 class="text-lg font-semibold text-gray-900">Card Title</h3>
  <p class="mt-2 text-sm text-gray-500">Card description goes here.</p>
  <button class="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
    Action
  </button>
</div>