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 | Valor em |
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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.