Les utilitaires Tailwind classiques pour spacing, couleur, typographie, flex et position, plus toute forme arbitraire [value] ou [prop:value]. Les variants ne sont pas encore pris en charge.

Pourquoi un sélecteur ?

La sortie est une règle CSS unique. Choisir le sélecteur permet de coller directement dans la feuille de style sans renommer ni emballer.

Les variants responsive et hover sont-ils gérés ?

Pas encore — ils requièrent un wrapper media query ou pseudo-classe. Retirez les préfixes md:, hover: et dark: avant de coller ; les utilitaires de base font un aller-retour propre.

Connaît-il mon thème Tailwind ?

Non. Il utilise l’échelle par défaut. Un spacing ou des couleurs custom retombent en arbitrary dans la sortie, mais le CSS reste exploitable.

Puis-je rebrancher le CSS sur le convertisseur inverse ?

Oui — pour les utilitaires simples l’aller-retour est exact. Les valeurs arbitraires survivent ; les déclarations non supportées restent en classes arbitrary.

Mes données sont-elles téléversées ?

Non. La conversion tient dans cet onglet ; Toova ne voit ni vos listes de classes, ni votre sélecteur, ni la sortie.

Tailwind vers CSS — utilitaires en règle

Utilitaires Tailwind → CSS

Conçu pour la confidentialité — fonctionne entièrement dans votre navigateur

Collez une liste d’utilitaires Tailwind et un sélecteur ; Toova construit la règle CSS correspondante. Les classes arbitraires comme p-[13px] ou [grid-template-columns:1fr_2fr] se déballent en déclarations brutes, prêtes à atterrir dans une feuille de style.

Quand le chemin inverse aide

Parfois on prototype en Tailwind mais on doit livrer du CSS — un e-mail marketing, un widget tiers, un hand-off vers un CMS sans Tailwind. Le convertisseur replie la liste d’utilitaires en une seule règle avec le sélecteur de votre choix ; vous collez sans renommer ni nettoyer le markup de playground.

Comment reviennent les valeurs arbitraires

Les classes arbitraires de Tailwind portent leur valeur inline : p-[13px] vaut padding: 13px et [grid-template-columns:1fr_2fr] vaut grid-template-columns: 1fr 2fr. Le convertisseur déballe les deux formes littéralement ; toute valeur encodée en JIT survit sans table de correspondance supplémentaire.

Limites et aller-retour

Les variants responsive (md:flex), d’état (hover:bg-black) et dark mode (dark:text-white) nécessitent un wrapper media query ou pseudo-classe ; le convertisseur ne les émet pas encore — retirez-les avant de coller. Les tokens de thème (text-brand) retombent sur l’échelle par défaut ; si vous customisez, attendez-vous à des fallbacks arbitraires. Les utilitaires simples font un aller-retour propre avec CSS-to-Tailwind.

Questions fréquentes

Que convertit-il ?: Les utilitaires Tailwind classiques pour spacing, couleur, typographie, flex et position, plus toute forme arbitraire [value] ou [prop:value]. Les variants ne sont pas encore pris en charge.
Pourquoi un sélecteur ?: La sortie est une règle CSS unique. Choisir le sélecteur permet de coller directement dans la feuille de style sans renommer ni emballer.
Les variants responsive et hover sont-ils gérés ?: Pas encore — ils requièrent un wrapper media query ou pseudo-classe. Retirez les préfixes md:, hover: et dark: avant de coller ; les utilitaires de base font un aller-retour propre.
Connaît-il mon thème Tailwind ?: Non. Il utilise l’échelle par défaut. Un spacing ou des couleurs custom retombent en arbitrary dans la sortie, mais le CSS reste exploitable.
Puis-je rebrancher le CSS sur le convertisseur inverse ?: Oui — pour les utilitaires simples l’aller-retour est exact. Les valeurs arbitraires survivent ; les déclarations non supportées restent en classes arbitrary.
Mes données sont-elles téléversées ?: Non. La conversion tient dans cet onglet ; Toova ne voit ni vos listes de classes, ni votre sélecteur, ni la sortie.