De la typographie CSS à Tailwind
font-size: 1.5rem → text-2xl. font-weight: 700 → font-bold. La couleur utilise text-*.
La typographie fait partie des conversions les plus directes : font-size: 1.5rem donne text-2xl, font-weight: 700 donne font-bold. La difficulté vient du préfixe text-, qui sert à la fois pour la taille et pour la couleur du texte. Dans une longue liste de classes, cette ambiguïté mérite une relecture attentive.
Taille et line-height ensemble
font-size + line-height mappent souvent vers text-* / leading-*. Si le leading de marque est rare, utilisez leading-[…].
Graisse et tracking
font-weight 600 → font-semibold. Un letter-spacing négatif fin demande souvent un tracking arbitraire.
Ne forcez pas la rampe
Arrondir 13px typo au token « le plus proche » peut casser la hiérarchie visuelle.
Essayer
.example { display: flex; gap: 1rem; padding: 1rem; }Note de confiance : vérifiez le rendu. Le convertisseur est une aide de brouillon.