Collez du CSS et obtenez des classes Tailwind v4 pour chaque sélecteur, ou collez des classes et récupérez le CSS. Hover, focus et breakpoints deviennent des variantes, et tout ce qui ne se convertit pas est listé.
Collez des règles CSS ordinaires et ce convertisseur renvoie une liste de classes Tailwind v4 pour chaque sélecteur, avec des classes nommées quand le thème par défaut a une correspondance exacte et des valeurs arbitraires comme w-[37px] sinon. Inversez le sens pour retransformer une liste de classes en CSS. Les sélecteurs et règles qui ne peuvent pas devenir des classes sont listés, jamais supprimés en silence.
Conversion des déclarations courantes (thème par défaut de Tailwind v4)
Migrer une feuille de style vers Tailwind à la main oblige à chercher des dizaines de noms de classes et à convertir mentalement des pixels en rem. Ce convertisseur fait la recherche et les calculs, montre quelles classes sont des valeurs arbitraires que vous pourriez arrondir à l'échelle, et vous indique clairement quelles règles doivent rester dans un fichier CSS.
Tailwind v4 avec le thème par défaut. L'espacement est calculé à partir de la valeur --spacing de 0.25rem, les noms de rayons suivent l'échelle v4 (rounded-xs vaut 2px, rounded-sm 4px, rounded-md 6px, etc.) et les breakpoints utilisent les valeurs en rem de la v4.
Une classe nommée n'est utilisée que si elle donne exactement la même valeur. Les couleurs deviennent toujours des valeurs arbitraires car un code hexadécimal correspond rarement exactement à une nuance de la palette, et les tailles de police restent arbitraires car les tailles de texte nommées définissent aussi une hauteur de ligne.
Les sélecteurs avec descendants, frères ou attributs, les media queries qui ne sont pas un simple min-width, les keyframes et autres at-rules, ainsi que les propriétés personnalisées. Ils apparaissent dans la liste des éléments non convertis pour que vous puissiez les déplacer dans votre fichier CSS.
Les classes du tableau du convertisseur, les valeurs arbitraires et les propriétés arbitraires reviennent exactement, avec l'espacement affiché en rem en supposant le --spacing par défaut. Les noms de couleurs du thème comme bg-blue-500 et les ombres prédéfinies ne figurent pas dans le tableau et sont listés comme ignorés plutôt que devinés.
Non, mais la syntaxe de propriété arbitraire [property:value] couvre tout ce pour quoi Tailwind n'a pas d'utilitaire, comme [mask-type:luminance]. Ce convertisseur l'utilise pour toute propriété qu'il ne reconnaît pas.
Une règle de carte avec un état hover et un breakpoint tablette.
Chaque déclaration devient une classe, et les règles hover et breakpoint deviennent des classes préfixées sur le même élément.
Collez des règles CSS ou une liste de classes Tailwind. Les valeurs arbitraires sont mises en évidence et tout ce qui ne peut pas être converti est listé sous le résultat.
Sens de conversion
CSS vers Tailwind
Tailwind vers CSS
Votre CSS
Vos classes Tailwind
Sélecteur pour la sortie CSS
Résultat
Tout copier
Copier les classes
Les classes mises en évidence sont des valeurs arbitraires : {n} sur {t}.
Non converti ({n})
Tout a été converti.
Rien à convertir pour l'instant.
le sélecteur nécessite une classe sur un autre élément ou une variante personnalisée
la media query n'a pas de breakpoint unique
at-rule conservée dans le CSS
propriété personnalisée, à garder dans le CSS ou @theme
absent du tableau de ce convertisseur
Commencer gratuitement · Sans carte bancaire