Des tailles fluides avec les valeurs arbitraires de Tailwind
Tailwind accepte n’importe quelle valeur CSS entre crochets. Comme les espaces séparent les classes, ceux de la valeur s’écrivent avec des tirets bas, que Tailwind reconvertit en générant le CSS. Le calculateur s’en charge et produit une classe comme text-[clamp(1rem,0.8333rem_+_0.8333vw,1.5rem)]. Les tirets bas autour du signe plus comptent : CSS exige des espaces autour de + et − dans les fonctions mathématiques.
L’intégrer à votre thème
Les classes arbitraires sont parfaites pour un titre ponctuel. Quand la même taille revient souvent, mieux vaut la placer dans le thème. Avec Tailwind v4, ajoutez une variable comme --text-fluid-lg: clamp(…) dans votre bloc @theme et utilisez text-fluid-lg partout. Avec Tailwind v3, ajoutez la valeur à theme.extend.fontSize dans tailwind.config.js.
Centraliser les tailles fluides dans le thème vous donne une source unique de vérité : si le design change, vous modifiez une ligne et tous les composants suivent.
Utilitaires d’espacement
La même sortie fonctionne pour les espacements. Passez le calculateur en mode espacement : il écrit p-[clamp(…)], que vous pouvez renommer en px-, py-, m-, gap- ou space-y- selon le besoin. En combinant espacements et texte fluides, la plupart des pages n’ont plus besoin d’aucun préfixe responsive pour les tailles.
Pièges courants
Si une classe text-[…] n’a aucun effet, vérifiez que la valeur ne contient pas d’espaces ordinaires et que Tailwind voit le nom complet de la classe dans vos fichiers source : les noms construits par concaténation de chaînes ne sont pas détectés. Si Tailwind interprète la valeur comme une couleur, écrivez text-[length:clamp(…)] pour préciser explicitement le type.