Convertisseur de classes Tailwind CSS en CSS classique

Convertisseur de classes Tailwind CSS en CSS classique

Collez une chaîne de classes d'utilité de Tailwind v3 et obtenez immédiatement la règle de CSS brut équivalente. Chaque classe de Tailwind est développée en sa déclaration CSS exacte avec les valeurs correctes de rem, px et de couleur tirées des tokens de conception officiels — sans supposition, sans arrondi.

Utile lors de la migration d'un composant Tailwind vers du CSS brut, lorsque vous souhaitez inspecter les déclarations sous-jacentes, ou lorsque vous devez livrer du CSS manuscrit sans étape de construction de Tailwind.

Comment utiliser

1. Collez votre chaîne de classe Tailwind dans la zone d'entrée (par exemple flex items-center gap-4 p-6 bg-blue-500).
2. Modifiez optionnellement le sélecteur — la valeur par défaut est .element.
3. Lisez le CSS généré dans le panneau de sortie. Les variantes réactives (md:, lg:…) sont encadrées par des @media requêtes ; les variantes d'état (hover:, focus:…) émettent leurs propres sélecteurs.
4. Copiez le résultat ou téléchargez-le sous forme de .css fichier.

Caractéristiques

• Échelle complète des espaces — Toutes les valeurs de marge, de padding, de gap, de largeur et de hauteur de Tailwind se résolvent en la sortie canonique en rem ou en px.
• Palette complète des couleurs — Les 22 familles de couleurs avec les tons 50 à 950 sont mappées à leurs codes hexadécimaux exacts pour le texte, le fond, la bordure, la remplissage et le tracé.
• Variantes réactives – sm:, md:, lg:, xl:et 2xl: sont émises comme des @media (min-width: ...) bloques.
• Variantes d'état – hover:, focus:, active:, disabled:, group-hover:, peer-focus:, dark:, before:, after: et plus deviennent des sélecteurs CSS ou des requêtes de média réelles.
• Valeurs arbitraires — La syntaxe avec crochets comme w-[37rem] ou bg-[#abc123] est transmise à la déclaration correspondante.
• Utilitaires négatifs — Les formes avec tiret initial comme -mt-4 produisent les valeurs négatives exactes en rem.
• Sélecteur personnalisé — Choisissez n'importe quel sélecteur pour envelopper la règle de sortie (.card, #hero, etc.).
• Copier et télécharger — Un clic pour copier le CSS ou le sauvegarder sous forme de fichier.