Tailwind CSS Converter
Convert raw CSS to Tailwind CSS utility classes and vice versa. Supports margin, padding, display, flex, grid, colors, typography, borders, and more.
CSS Input
Tailwind Output
Paste CSS on the left to generate Tailwind classes
Tailwind CSS Converter
Convert raw CSS to Tailwind CSS utility classes and vice versa. Supports margin, padding, display, flex, grid, colors, typography, borders, and more.
Features
- Convertissez les propriétés CSS en classes utilitaires Tailwind CSS instantanément
- Mode inverse : convertissez les classes Tailwind en CSS brut
- Prend en charge plus de 50 propriétés CSS dont flex, grid, espacement, couleurs et typographie
- Gère les valeurs arbitraires avec la notation entre crochets de Tailwind
- Reconnaît l'échelle d'espacement par défaut, la palette de couleurs et les breakpoints de Tailwind
- Met en évidence les propriétés non mappées pour que vous sachiez ce qui nécessite une conversion manuelle
How to use
- Collez votre code CSS dans le panneau gauche ou cliquez sur Exemple pour du CSS d'exemple.
- Visualisez les classes Tailwind générées instantanément dans le panneau droit.
- Cliquez sur Inverser pour passer en mode inverse et convertir les classes Tailwind en CSS.
FAQ
Quelles propriétés CSS sont prises en charge ?
Le convertisseur prend en charge plus de 50 propriétés CSS courantes dont display, position, mise en page flex/grid, margin, padding, width, height, font-size, font-weight, couleurs, border, border-radius, opacity, box-shadow, z-index, overflow, cursor et bien d'autres. Les propriétés non prises en charge sont listées comme commentaires non mappés.
Puis-je convertir des classes Tailwind en CSS ?
Oui. Cliquez sur le bouton Inverser pour passer en mode inverse. Entrez des classes utilitaires Tailwind séparées par des espaces, et l'outil générera les déclarations CSS équivalentes enveloppées dans un sélecteur .element.
Comment les couleurs sont-elles mappées ?
Le convertisseur reconnaît la palette de couleurs par défaut de Tailwind (slate, gray, red, blue, green, yellow, purple) à différentes nuances (50-900). Les valeurs hexadécimales comme #3b82f6 sont mappées à blue-500. Les couleurs non reconnues utilisent la syntaxe de valeurs arbitraires de Tailwind, p.ex. bg-[#custom].
Gère-t-il les propriétés CSS abrégées ?
Oui. Les propriétés abrégées comme margin, padding et border sont analysées et converties en leurs équivalents Tailwind. Par exemple, margin: 8px 16px devient my-2 mx-4, et border: 1px solid #ccc devient border border-solid border-[#ccc].
Mes données CSS sont-elles envoyées à un serveur ?
Non. Toute la conversion se fait entièrement dans votre navigateur en utilisant du JavaScript côté client. Votre code CSS ne quitte jamais votre appareil, rendant cet outil complètement privé et sûr pour une utilisation avec du code propriétaire.
Que se passe-t-il avec les propriétés non prises en charge ?
Les propriétés qui ne peuvent pas être mappées à une classe Tailwind standard sont listées comme commentaires dans la sortie. Cela vous permet de voir exactement quelles propriétés nécessitent un traitement manuel ou une configuration Tailwind personnalisée.
Prend-il en charge les valeurs arbitraires Tailwind ?
Oui. Lorsqu'une valeur CSS ne correspond pas à l'échelle par défaut de Tailwind, le convertisseur utilise la syntaxe de valeurs arbitraires comme p-[13px] ou text-[22px]. En mode inverse, les valeurs arbitraires comme w-[200px] sont correctement analysées et converties en width: 200px.