Arbitrary Values [...]

Définition

Syntaxe entre crochets pour une valeur absente du thème. En v4, une variable CSS s'écrit entre parenthèses (bg-(--brand)) et non plus bg-[--brand] ; le modificateur important passe en fin de classe (flex!).

Analogie

Un joker dans un jeu de cartes : tu l'utilises quand aucune carte standard ne convient.

Exemple de code

<div class="top-[117px] w-[calc(100%-2rem)]
  bg-[#1da1f2] grid-cols-[1fr_2fr]
  bg-(--brand-color) flex!">
</div>
<!-- v3 : bg-[--brand-color] !flex -->

Cas d'usage

Respecter une maquette pixel-perfect avec des valeurs spécifiques sans polluer la config Tailwind.

Anti-pattern

Termes liés

Sources

• tailwindcss.com/docs/upgrade-guide