Classes fundamentais

Toda classe do Tailwind segue um padrão: propriedade-valor. Uma vez que você entende a lógica, não precisa decorar centenas de classes — você deduz.

Espaçamento

p (padding) e m (margin), combinados com um eixo opcional — t/b/l/r (top/bottom/left/right) ou x/y (horizontal/vertical) — e um número na escala do Tailwind (múltiplos de 0.25rem: 4 = 1rem = 16px).

<div class="p-4">      <!-- padding de 1rem nos 4 lados -->
<div class="px-6 py-2"> <!-- padding horizontal 1.5rem, vertical 0.5rem -->
<div class="mt-8">     <!-- margin-top de 2rem -->
<div class="gap-4">    <!-- espaço entre itens de um flex/grid -->

Cor

bg- (background), text- (cor do texto) e border- seguem cor-intensidade, onde intensidade vai de 50 (quase branco) a 950 (quase preto). blue-600 é bem diferente de blue-100.

<p class="text-slate-600 bg-slate-100 border border-slate-300">

Tipografia

<h1 class="text-3xl font-bold tracking-tight">Título</h1>
<p class="text-sm font-medium text-slate-500">Legenda</p>

Flex e grid — os dois layouts que resolvem quase tudo

flex organiza itens numa linha ou coluna (bom pra barras de navegação, listas, formulários); grid organiza numa malha de linhas e colunas (bom pra cards, dashboards, galerias).