Tamanhos fluidos com valores arbitrários do Tailwind
O Tailwind aceita qualquer valor CSS entre colchetes. Como os espaços separam as classes, os espaços dentro do valor são escritos como sublinhados, que o Tailwind converte de volta ao gerar o CSS. A calculadora cuida disso e produz uma classe como text-[clamp(1rem,0.8333rem_+_0.8333vw,1.5rem)]. Os sublinhados ao redor do sinal de mais são importantes: o CSS exige espaços em volta de + e − dentro de funções matemáticas.
Levando para o seu tema
Classes arbitrárias são perfeitas para um título pontual. Quando o mesmo tamanho aparece em vários lugares, é melhor levá-lo para o tema. No Tailwind v4, adicione uma variável como --text-fluid-lg: clamp(…) dentro do bloco @theme e use text-fluid-lg em qualquer lugar. No Tailwind v3, adicione o valor em theme.extend.fontSize no tailwind.config.js.
Manter os tamanhos fluidos no tema cria uma única fonte da verdade: se o design mudar, você altera uma linha e todos os componentes acompanham.
Utilitários de espaçamento
A mesma saída serve para espaçamento. Mude a calculadora para o modo espaçamento e ela gera p-[clamp(…)], que você pode renomear para px-, py-, m-, gap- ou space-y- conforme a necessidade. Combinando espaçamento fluido com texto fluido, a maioria das páginas não precisa de nenhum prefixo responsivo para tamanhos.
Armadilhas comuns
Se uma classe text-[…] não fizer efeito, verifique se o valor não tem espaços comuns e se o Tailwind consegue ver o nome completo da classe nos seus arquivos – nomes de classe montados por concatenação de strings não são detectados. Se o Tailwind entender o valor como uma cor, escreva text-[length:clamp(…)] para indicar o tipo explicitamente.