O vocabulário básico

Abra o layout de uma interface existente e meça o padding interno de suas caixas: 12, 16, 15, 20, 14, 24 pixels. Ninguém decidiu esse 15, nem esse 14. Eles surgiram porque um dia um texto transbordou dois pixels, e um padding: 15px resolveu o problema mais rápido do que uma reflexão sobre a grade. Multiplicadas por dois anos de correções, essas diferenças de um ou dois pixels produzem uma interface que todo mundo acha vagamente torta, sem saber dizer por quê.

O Tailwind torna essa deriva difícil, porque não oferece um contínuo de valores, e sim uma escala. p-3 vale 12 pixels, p-4 vale 16, e não há nada entre os dois. O primeiro reflexo, diante de uma necessidade de 15 pixels, é procurar como forçar o valor. O reflexo certo é escolher 16: em 95% dos casos, nenhum usuário vai notar a diferença, e você acabou de ganhar uma interface consistente. Esta lição apresenta o vocabulário básico, mas seu verdadeiro tema é este — saber quando ficar na escala e quando sair dela.

Os espaçamentos

Uma única unidade governa toda a grade: 1 vale 0.25rem, ou seja, 4 pixels em uma configuração padrão. Multiplique pelo número escrito na classe.