Layout com Flexbox e Grid

Uma barra de navegação: o logo à esquerda, os links no centro, um botão à direita. Você escreve flex, adiciona justify-between, e o resultado é quase bom — só que os links não ficam centralizados na página, eles flutuam no meio do espaço restante, e tudo se desloca assim que um nome de usuário é mais longo. Você adiciona flex-1, depois um mx-auto, depois um w-1/3 que resolve o sintoma e quebra a exibição no mobile. Uma hora depois, você tem seis classes de remendo e um layout frágil.

O problema quase nunca é o Tailwind. É que Flexbox e Grid não servem ao mesmo propósito, e metade das dificuldades de alinhamento vem de ter escolhido o errado dos dois. O Flexbox distribui elementos em um único eixo, deixando seus tamanhos se ajustarem ao conteúdo: é a ferramenta das barras, dos grupos de botões, das linhas de metadados. O Grid define uma estrutura bidimensional decidida de antemão, independente do conteúdo: é a ferramenta das grades de cards, dos gabaritos de página, dos formulários alinhados. Uma barra de navegação com três zonas fixas é um problema de Grid, não de Flexbox — daí a hora perdida.