Convertisseur Tailwind vers CSS
Développe les utilitaires Tailwind en déclarations CSS.
À propos de cet outil
L’outil développe les classes utilitaires courantes de Tailwind en déclarations CSS. Les variantes comme hover: ou md: sont signalées dans les notes, car elles supposent un sélecteur dédié ou une media query.
Comment l’utiliser
Copiez les classes d’un composant, lancez la conversion, puis reportez les déclarations dans votre feuille de styles ou comparez-les à vos tokens. Les utilitaires inconnus restent visibles dans les notes.
Exemple
L’exemple fourni combine des utilitaires de mise en page et d’espacement.
Entrée
flex items-center gap-4 p-6 rounded-lg bg-white shadow-lg text-gray-900 font-semiboldSortie
.element {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
border-radius: 0.5rem;
/* …mapped declarations… */
}Conseil
Pratique pour comprendre le CSS derrière un utilitaire ou pour maintenir une couche CSS à côté de Tailwind.
Bon à savoir
Quelles classes Tailwind sont comprises ?
Un sous-ensemble pratique : display et position, alignement flex, l'échelle d'espacement pour padding, margin, gap et dimensions, taille et graisse de police, border-radius, quelques ombres, colonnes de grille, opacité, z-index, une courte liste de couleurs courantes et des valeurs arbitraires comme w-[320px] ou bg-[#38bdf8]. Tout le reste est signalé dans les notes plutôt que deviné.
Que deviennent hover:, md: et les autres variantes ?
Elles sont signalées dans les notes, pas développées. Une variante exige un sélecteur ou une media query autour de la déclaration : encadrez-les à la main dans votre feuille de style.