Arbitrary Values [...]

Tailwind CSS 🟡 Mid

Definition

Syntaxe entre crochets permettant d'utiliser des valeurs custom non prevues dans le theme. Evite de modifier la config pour des cas ponctuels.

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]
  text-[clamp(1rem,2vw,1.5rem)]">
</div>

Cas d'usage

Respecter une maquette pixel-perfect avec des valeurs specifiques sans polluer la config Tailwind.

Anti-pattern

Abuser des valeurs arbitraires au lieu d'etendre le theme pour des valeurs reutilisees.

Termes lies

#styling#interview#tailwind