p-6 / px-4 py-2 / pt-8 pb-0
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.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.<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
mx, my, mt, etc.). O mx-auto define as margens laterais como automáticas.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.<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)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).<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
flex ou grid. Você pode controlar o espaço das colunas (gap-x) independente do espaço das linhas (gap-y).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.<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
space-y-4 em uma div pai, ela automaticamente injeta margin-top em todos os elementos filhos (exceto no primeiro).space-y-4 espaça os blocos verticalmente de forma limpa e automática.