Tamaños fluidos con valores arbitrarios de Tailwind
Tailwind permite poner cualquier valor CSS entre corchetes. Como los espacios separan las clases, los espacios dentro del valor se escriben como guiones bajos, que Tailwind vuelve a convertir al generar el CSS. La calculadora se encarga de ello y produce una clase como text-[clamp(1rem,0.8333rem_+_0.8333vw,1.5rem)]. Los guiones bajos alrededor del signo más importan: CSS exige espacios alrededor de + y − dentro de las funciones matemáticas.
Llevarlo a tu tema
Las clases arbitrarias son perfectas para un titular puntual. Cuando el mismo tamaño aparece en muchos sitios, es mejor llevarlo al tema. En Tailwind v4, añade una variable como --text-fluid-lg: clamp(…) dentro de tu bloque @theme y podrás usar text-fluid-lg en todas partes. En Tailwind v3, añade el valor a theme.extend.fontSize en tailwind.config.js.
Tener los tamaños fluidos en el tema te da una única fuente de verdad: si el diseño cambia, actualizas una línea y todos los componentes la siguen.
Utilidades de espaciado
La misma salida sirve para el espaciado. Cambia la calculadora al modo espaciado y escribirá p-[clamp(…)], que puedes renombrar a px-, py-, m-, gap- o space-y- según convenga. Combina espaciado fluido con texto fluido y la mayoría de las páginas no necesitarán ningún prefijo responsive para los tamaños.
Errores habituales
Si una clase text-[…] no hace nada, comprueba que el valor no contenga espacios normales y que Tailwind pueda ver el nombre completo de la clase en tus archivos fuente: los nombres construidos concatenando cadenas no se detectan. Si Tailwind interpreta el valor como un color, escríbelo como text-[length:clamp(…)] para indicar el tipo de forma explícita.