1. Espaçamento (Padding, Margin, Gap e Space)

p-6 / px-4 py-2 / pt-8 pb-0

• O que faz: Define o Padding (margem interna), empurrando o conteúdo para longe das bordas do próprio elemento. p aplica em todos os lados. px atua no eixo X (esquerda/direita) e py no eixo Y (topo/base). pt, pb, pl e pr controlam individualmente Top, Bottom, Left e Right.
• Para que serve: Dar "respiro" aos elementos. O p-6 é o padrão de mercado para criar o espaço interno de um card, evitando que o texto encoste na borda. A proporção px-6 py-2 (sempre mais largo nas laterais do que na altura) é a regra de ouro do design para criar botões bonitos e clicáveis.
• Exemplo: <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200"> <button className="bg-blue-600 text-white px-6 py-2 rounded-lg font-bold"> Botão com Proporção Perfeita </button> </div>

m-4 / mx-auto / mt-8 / mb-4

• O que faz: Define a Margin (margem externa), empurrando os outros elementos para longe. Segue a mesma lógica de direções do padding (mx, my, mt, etc.). O mx-auto define as margens laterais como automáticas.
• Para que serve: Separar blocos na página. O mt-8 (margin-top) é excelente para dar uma boa distância entre o fim de uma seção e o título da próxima. O mx-auto é a classe mais importante para centralizar containers de layout na tela, dividindo o espaço vazio igualmente entre a esquerda e a direita.
• Exemplo: <div className="w-full max-w-4xl mx-auto bg-slate-50 min-h-[200px] border border-gray-300 p-4"> <h2 className="text-xl font-bold mb-4">Seção Centralizada na Tela</h2> <p className="text-slate-600">O mx-auto garante que este bloco fique no meio do monitor.</p> </div>
• mt-8 / ml-4 (Margens Negativas)
• O que faz: Ao adicionar um hífen antes da classe de margem, o Tailwind aplica uma margem negativa. Em vez de afastar o elemento, isso o "puxa" na direção contrária, fazendo-o invadir o espaço do elemento vizinho.
• Para que serve: O truque absoluto para sobreposições limpas! Sabe aquelas fotos de perfil redondas que ficam metade para cima da imagem de capa e metade para baixo? Você consegue isso colocando um mt-12 (margin-top negativo) na foto de perfil. Também é muito usado para agrupar avatares (ml-3 para que uma foto fique ligeiramente por cima da outra).
• Exemplo: <div className="max-w-md bg-white rounded-xl shadow-sm border border-gray-200 mt-12 px-6 pb-6"> {/* A margem negativa puxa esta div para cima, invadindo o espaço exterior */} <div className="w-16 h-16 bg-blue-500 rounded-full mx-auto -mt-8 flex items-center justify-center border-4 border-white shadow-sm"> <span className="text-white font-bold">AT</span> </div> <h3 className="text-center font-bold text-slate-800 mt-4">Perfil do Usuário</h3> </div>

gap-4 / gap-x-6 / gap-y-2

• O que faz: Define o espaçamento (lacuna) entre itens filhos. Funciona exclusivamente quando o container pai está usando flex ou grid. Você pode controlar o espaço das colunas (gap-x) independente do espaço das linhas (gap-y).
• Para que serve: Substituiu o uso de margens em 90% dos casos modernos! Em vez de colocar mr-4 em cada item de um menu (e ter que tirar do último item para não quebrar o layout), você apenas coloca gap-4 no container pai e ele espaça tudo de forma perfeitamente matemática.
• Exemplo: <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4 bg-slate-100 p-6 rounded-lg"> <div className="bg-white p-4 shadow-sm rounded">Exercício 1</div> <div className="bg-white p-4 shadow-sm rounded">Exercício 2</div> <div className="bg-white p-4 shadow-sm rounded">Exercício 3</div> <div className="bg-white p-4 shadow-sm rounded">Exercício 4</div> </div>

space-y-4 / space-x-2 / space-y-reverse

• O que faz: Um atalho incrível do Tailwind. Quando você coloca space-y-4 em uma div pai, ela automaticamente injeta margin-top em todos os elementos filhos (exceto no primeiro).
• Para que serve: É a solução perfeita quando você tem uma lista de textos, parágrafos ou formulários e não quer transformar o container em Flexbox ou Grid. O space-y-4 espaça os blocos verticalmente de forma limpa e automática.