CSS → utilitaires Tailwind
Conçu pour la confidentialité — fonctionne entièrement dans votre navigateur
Collez des déclarations CSS à gauche et copiez les classes utilitaires Tailwind à droite. Le convertisseur fait correspondre les échelles standards de spacing, couleur, typographie et layout aux utilitaires natifs, et utilise la notation entre crochets pour toute valeur que Tailwind ne connaît pas en natif.
Propriétés couvertes
Le convertisseur comprend la surface CSS du quotidien : spacing en padding et margin, tailles et poids de police, couleurs (text et bg), display, direction et alignement flex, border-radius, width et height, position, gap. Chaque déclaration tombe sur le raccourci canonique de Tailwind — p-4, text-lg, justify-between — et la sortie se lit comme du Tailwind écrit à la main.
L’intérêt de la notation arbitraire
Les bases de code réelles ont des valeurs sans raccourci : font-size de 13 px, couleur de marque avec hex propre, gap de 1.7 rem. Le convertisseur émet alors la forme arbitraire — text-[13px] ou bg-[#3b82f6]. La classe reste du Tailwind valide, JIT la compile, et le round-trip vers Tailwind-to-CSS passe proprement.
Quand attendre un passage en arbitrary
Sélecteurs complexes, animations, gradients et keyframes ne sont volontairement pas convertis — ils vivent dans des couches que Tailwind couvre via plugins ou @apply, et une heuristique mentirait sur la correction. Ces déclarations restent telles quelles dans des classes [prop:value], pour que vous puissiez les relire sans perte de donnée.
Questions fréquentes
- Quelles propriétés CSS sont reconnues ?
- Échelles spacing pour padding et margin, couleurs texte et arrière-plan, display, alignement flex, tailles et poids de police, border-radius, width et height, position et gap. Le reste tombe en classe arbitraire [prop:value].
- Que se passe-t-il si la valeur n’est pas dans l’échelle standard ?
- Le convertisseur émet la notation arbitraire telle p-[13px] ou bg-[#3b82f6]. JIT compile et la classe reste un Tailwind valide sans retouche manuelle.
- Comprend-il les variables CSS personnalisées ?
- Oui. Les valeurs var(--token) ressortent entre crochets ; vous conservez la variable dans le theme de tailwind.config ou en custom property dans :root.
- La conversion est-elle sans perte ?
- Sur les patterns courants oui. Animations, gradients et sélecteurs exotiques deviennent des classes arbitraires — ils survivent mais vous voudrez sûrement garder le CSS d’origine pour eux.
- Peut-on faire un aller-retour avec Tailwind-to-CSS ?
- En grande partie. Les utilities simples reviennent à l’identique ; les valeurs arbitraires sont conservées, mais les déclarations non gérées restent en arbitrary au retour.
- Quelque chose est-il téléversé ?
- Non. Toute la conversion vit dans cet onglet ; le contenu de votre feuille de style ne quitte pas la page.