Espaçamento
No Tailwind CSS, o controle de espaçamento é feito por meio de utilitárias específicas para margens (m-*), preenchimentos internos (p-*) e espaçamento entre elementos em layouts com flex ou grid (gap-*).
Essas utilitárias seguem uma escala predefinida e consistente, que permite criar layouts com harmonia visual e sem a necessidade de valores arbitrários.
Escala de espaçamento #
Tailwind adota uma escala baseada em múltiplos de 4px, convertidos para rem:
| Classe | Valor em rem | Valor em px |
| ------ | -------------- | ------------------- |
| 0 | 0 | 0px |
| 1 | 0.25rem | 4px |
| 2 | 0.5rem | 8px |
| 3 | 0.75rem | 12px |
| 4 | 1rem | 16px |
| 5 | 1.25rem | 20px |
| 6 | 1.5rem | 24px |
| 8 | 2rem | 32px |
| 10 | 2.5rem | 40px |
| 12 | 3rem | 48px |
| 16 | 4rem | 64px |
| 20 | 5rem | 80px |
| 24 | 6rem | 96px |
| 32 | 8rem | 128px |
| 40 | 10rem | 160px |
| auto | automático | depende do conteúdo |
Essa escala pode ser estendida ou personalizada no arquivo tailwind.config.js, mas para a maioria dos casos ela cobre bem os cenários comuns de layout.
Tipos de espaçamento #
Margin #
A margem controla o espaçamento externo entre elementos.
Exemplos:
-
m-4: aplica margem em todos os lados -
mt-2: margem superior -
mx-auto: margem horizontal automática (centraliza)
Ver mais em: fundamentos/espaçamento/margin
Padding #
O padding define o espaçamento interno do elemento.
Exemplos:
-
p-4: aplica padding em todos os lados -
pl-2: padding à esquerda -
py-6: padding vertical
Ver mais em: fundamentos/espaçamento/padding
Gap #
gap é usado para definir o espaçamento entre elementos filhos de um container flex ou grid.
Exemplos:
-
gap-4: espaço uniforme entre colunas e linhas -
gap-x-2: espaço horizontal entre colunas -
gap-y-8: espaço vertical entre linhas
Ver mais em: fundamentos/espaçamento/gap
Essas três formas de controle de espaçamento podem ser usadas combinadas para criar layouts limpos, modulares e com bom espaçamento interno e externo, sem precisar escrever nenhuma linha de CSS tradicional.