LOG 06 · ESTILIZAÇÃO
Tailwind CSS v4 na Prática
Tailwind v4 para um trabalho de layout rápido e consistente — combinado com CSS escrito à mão para as partes (empilhamento 3D, overlays de shaders personalizados, animação por keyframes) que precisam de um controlo ao nível do pixel que uma classe de utilidade não consegue expressar.
Publicado · Atualizado
Utilitários para a estrutura, CSS para o pormenor
O Tailwind trata das partes de um layout que são genuinamente repetitivas — escalas de espaçamento, estrutura flex/grid, breakpoints responsivos — de forma rápida, e sem inventar um nome de classe novo para cada div. Mas as partes de um site que o fazem parecer personalizado em vez de genérico (uma rampa de cor oklch específica, uma coreografia de z-index entre um canvas WebGL e uma camada CSS3D, uma animação por keyframes ajustada à mão) continuam a ser CSS escrito à mão, porque é aí que uma classe de utilidade deixa de ser mais rápida do que simplesmente escrever as três linhas de CSS diretamente.
A configuração CSS-first do Tailwind v4 — propriedades personalizadas `@theme` reais em vez de um objeto de configuração JS — torna essa divisão mais fácil de manter: os mesmos tokens de design (cor, espaçamento) são endereçáveis tanto a partir das classes de utilidade como do CSS escrito à mão mesmo ao lado.
Onde termina a camada de utilitários
A divisão vê-se com clareza na prática. O ritmo da página — direção do empilhamento, espaçamentos, breakpoints, larguras máximas — são utilitários, porque são as decisões que se repetem em todas as páginas e beneficiam de uma escala partilhada. Tudo o que tem uma identidade própria é uma classe real numa folha de estilos: o ritmo de cabeçalhos que o diário e os casos de estudo partilham, os contadores na cor de destaque de uma lista numerada, as linhas finas que separam um bloco do seguinte.
A cor é o exemplo mais claro de porque essa divisão funciona. A paleta é escrita em oklch e não em hex, porque a luminosidade percetual é exatamente o que se está a afinar quando uma cor de corpo mais apagada tem de ficar a uma distância precisa abaixo de um cabeçalho sobre um fundo quase preto. Esses valores vivem como propriedades personalizadas, por isso as classes utilitárias e as regras escritas à mão leem dos mesmos tokens em vez de se afastarem com o tempo.