Guides

• CSS face à Tailwind — Le CSS classique excelle pour sélecteurs complexes et animations. Tailwind colocalise les décisions visuelles avec le markup. La plupart des équipes combinent les deux.
• De l’espacement CSS à Tailwind — padding: 1.5rem devient p-6. Les raccourcis s'étendent en utilitaires de côté. Hors échelle : p-[13px].
• De la typographie CSS à Tailwind — font-size: 1.5rem → text-2xl. font-weight: 700 → font-bold. La couleur utilise text-*.
• De CSS Flexbox à Tailwind — display:flex → flex. flex-direction:column → flex-col. justify-content:space-between → justify-between. gap:1rem → gap-4.
• De CSS Grid à Tailwind — grid-template-columns: repeat(3, 1fr) → grid-cols-3. Les pistes custom utilisent des valeurs arbitraires.
• Des couleurs CSS à Tailwind — Les hex connus mappent vers text-gray-900. Inconnus : bg-[#1a2b3c].
• Des bordures CSS à Tailwind — border: 1px solid → border + border-color. border-radius: 0.5rem → rounded-lg.
• Du CSS responsive à Tailwind — @media (min-width: 768px) → md:. 1024px → lg:. Les requêtes complexes demandent une revue.
• Des ombres CSS à Tailwind — Élévations courantes → shadow / shadow-lg. Ombres uniques → valeurs arbitraires.
• Du positionnement CSS à Tailwind — position:absolute → absolute. Les côtés mappent vers top/right/bottom/left. z-index custom → arbitraire.
• Stratégies de migration CSS — Préférez une migration incrémentale : nouveaux composants en Tailwind, puis chemins critiques, CSS legacy jusqu'au remplacement.

Ouvrir le convertisseur Extension Chrome