Toutes les classes Tailwind sont-elles couvertes ?

Il couvre les classes utilitaires les plus courantes (100+). Les valeurs de thème personnalisées et les valeurs arbitraires complexes peuvent ne pas être converties parfaitement.

Et les classes de couleur ?

Les classes de couleur (text-blue-500, bg-red-200) sont affichées comme commentaires car les valeurs réelles dépendent de la configuration de votre thème Tailwind.

Puis-je coller une chaîne className complète ?

Oui. Collez des classes séparées par des espaces comme 'flex items-center p-4 text-sm font-bold' et chacune sera convertie en son équivalent CSS.

Outil Développeur

Convertisseur Tailwind vers CSS

Convertissez les classes Tailwind CSS en leur équivalent CSS natif. Collez vos classes et obtenez le CSS standard avec les propriétés et valeurs appropriées.

100% gratuit — aucun compte requis

Classes Tailwind

classes converties: 7/7

Tailwind

flex

items-center

justify-between

p-4

rounded-lg

bg-white

shadow-md

CSS

display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
border-radius: 0.5rem;
/* bg-white: theme-dependent color */
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

Tailwind → CSS natif

Comprenez ce que font vos classes Tailwind

100+ classes

Prend en charge l'espacement, le dimensionnement, le texte, flex, grid, display, border et plus.

Valeurs dynamiques

Gère les valeurs dynamiques comme p-4, m-2, w-1/2, text-xl avec calcul approprié.

Support des préfixes

Reconnaît les préfixes responsive (md:, lg:) et d'état (hover:, focus:).

Copier le CSS

Copie en un clic du CSS natif généré.

FAQ

Outils Développeur

Plus d'utilitaires CSS

Dégradé CSS, box shadow, flexbox playground et plus encore.