Por que deixar o espaçamento fluido
Um espaço em branco generoso deixa o layout de desktop tranquilo, mas o mesmo padding de seção de 96px desperdiça um terço da tela do celular. Breakpoints fixos resolvem isso em degraus e muitas vezes deixam os tablets com espaçamento apertado ou folgado demais. Um valor fluido cresce de forma contínua, então cada tela recebe espaço proporcional à sua largura, e você escreve uma declaração em vez de três.
A mesma matemática da tipografia fluida
O espaçamento usa exatamente a mesma fórmula linear do tamanho de fonte: um mínimo, um máximo e uma reta entre duas larguras de viewport. A diferença está nos números escolhidos. O espaçamento costuma crescer por um fator maior que o texto – ir de 24px a 64px de padding de seção é comum –, porque o espaço em branco não precisa continuar legível. O aviso de zoom de 2,5× das WCAG não se aplica ao espaçamento, mas aparece como lembrete caso você reutilize o valor em texto.
Montando uma escala de espaçamento
Para um sistema consistente, defina alguns tokens de espaço fluidos, como --space-s, --space-m e --space-l, cada um com seu mínimo e máximo. Use os pequenos nos espaços dentro dos componentes, os médios no padding dos cards e os grandes entre as seções da página. Combine-os com uma escala tipográfica fluida na mesma faixa de viewport para que texto e espaço cresçam no mesmo ritmo.
No Tailwind, aplique o resultado como valor arbitrário, por exemplo p-[clamp(…)], gap-[clamp(…)] ou my-[clamp(…)]. A calculadora entrega uma classe pronta com sublinhados no lugar dos espaços, que é como o Tailwind espera os espaços dentro de valores arbitrários.
Dicas
Mantenha o espaçamento em rem para que ele respeite, junto com o texto, as configurações de fonte do usuário. Evite valores fluidos em bordas e linhas finas, em que frações de pixel podem ficar borradas. Confira a prévia em 320px para garantir que o padding ainda deixa espaço para o conteúdo.