# Classes Tailwind vers CSS Convertit les classes Tailwind (ex. p-4 flex gap-2 hover:bg-blue-500/20 md:p-6) en CSS équivalent copiable pour des projets sans Tailwind. Couvre spacing, flex, grid, couleurs, typographie, bordures, effets, transformations, transitions et variantes responsive/état. > Page canonique: https://elysiatools.com/fr/tools/tailwind-class-to-css-converter - **Catégorie:** Development - **Mots-clés:** tailwind, tailwind vers css, snippet css, classes utilitaires, tailwind playground, convertisseur css, flex, grid, hover ## Présentation Voyez exactement ce que produit une classe Tailwind — puis copiez le CSS brut dans n'importe quel projet. **Pourquoi.** Tailwind est génial, mais parfois vous avez besoin du CSS brut : un projet sans Tailwind, un template d'email, un audit de design tokens. Collez les classes et obtenez le CSS équivalent instantanément. **Couverture.** Le moteur de règles gère les utilitaires les plus courants : layout (flex/grid/gap), spacing, tailles, couleurs, typographie, bordures, effets, transformations, transitions et variantes responsive/état. **Modificateur d'opacité.** La syntaxe `bg-blue-500/20` se développe en `rgba()`. **Limites.** C'est une table de règles statique, pas le moteur JIT complet. Pour 100% de fidélité, utilisez le compilateur officiel Tailwind. ## Entrées - **Classes Tailwind** (textarea): p-4 flex gap-2 hover:bg-blue-500/20 md:p-6 rounded-lg shadow-md - **Sélecteur de portée** (select) ## Quand l'utiliser - Lors de l'intégration de composants stylisés avec Tailwind dans un projet existant qui n'utilise pas ce framework. - Pour concevoir des templates d'e-mails HTML nécessitant du CSS brut sans dépendance externe. - Pour auditer ou extraire rapidement les propriétés CSS réelles générées par des classes utilitaires spécifiques. ## Fonctionnement - Saisissez ou collez vos classes Tailwind dans le champ de texte prévu à cet effet. - Choisissez le sélecteur de portée souhaité, comme une classe personnalisée ou des variables globales. - L'outil analyse les classes et génère instantanément le CSS équivalent, incluant les blocs de média queries et les états de survol. ## Cas d'usage - Conversion de styles de boutons interactifs avec des états de survol et de focus en CSS natif. - Création de structures de cartes responsives avec flexbox ou grid pour des intégrations web classiques. - Extraction de styles de couleurs avec opacité pour les intégrer dans des variables CSS globales. ## Questions fréquentes ### Comment l'outil gère-t-il les modificateurs d'opacité comme bg-blue-500/20 ? Il convertit automatiquement la couleur et son opacité en une valeur rgba() standard compatible avec tous les navigateurs. ### Les variantes responsives comme md: ou lg: sont-elles prises en charge ? Oui, l'outil génère les blocs @media (min-width: ...) correspondants pour structurer le CSS responsive. ### Puis-je appliquer le CSS généré à un sélecteur spécifique ? Oui, vous pouvez définir un sélecteur personnalisé comme .my-class pour encapsuler toutes les règles générées. ### L'outil prend-il en charge les valeurs arbitraires comme w-\[327px\] ? Non, cet outil utilise une table de règles statique pour les classes standards et ne remplace pas le compilateur JIT complet de Tailwind. ### Faut-il installer Tailwind pour utiliser ce convertisseur ? Non, le convertisseur fonctionne entièrement en ligne dans votre navigateur sans aucune installation ni configuration. ## Outils associés - [Convertisseur Markdown en PDF](https://elysiatools.com/fr/tools/markdown-to-pdf-converter): Convertir les fichiers Markdown en documents PDF avec formatage, coloration syntaxique et style - [Convertisseur Markdown vers HTML](https://elysiatools.com/fr/tools/markdown-to-html): Convertit le texte Markdown en HTML avec des options de formatage personnalisables - [Convertisseur HTML vers Markdown](https://elysiatools.com/fr/tools/html-to-markdown): Convertit le contenu HTML en format Markdown avec des options de conversion personnalisables - [Explorateur d’Expressions Cron](https://elysiatools.com/fr/tools/cron-expression-explainer): Analyse une expression cron (5/6 champs ou Quartz) en description en langage naturel, détaille les champs et liste les N prochaines exécutions dans tout fuseau IANA, avec une explication IA - [Fiche de spécifications responsive Figma iOS Android pt dp sp](https://elysiatools.com/fr/tools/figma-ios-android-pt-dp-sp-responsive-design-spec-card): Convertit les valeurs px Figma vers les bonnes unités par plateforme et génère une spec card développeur : pt iOS (@1x/@2x/@3x avec px rendus par échelle), dp/sp Android (table de rendu mdpi…xxxhdpi et échelle de police), rem/vw web avec extrait clamp() fluide ; audit des cibles tactiles minimales (44pt iOS / 48dp Android / 44px et 24px WCAG) avec classes de fenêtres Material et breakpoints Tailwind. - [Aperçu Markdown](https://elysiatools.com/fr/tools/markdown-preview): Convertit Markdown en HTML avec coloration syntaxique et thèmes personnalisables - [Générateur de Data URI](https://elysiatools.com/fr/tools/data-uri-generator): Convertit les fichiers en Data URI (Base64 ou pourcentage-encodé) pour intégrer images, polices et ressources directement dans HTML, CSS ou Markdown - [Liste indentée vers arbre ASCII](https://elysiatools.com/fr/tools/ascii-tree-from-indented-list): Transforme une liste hiérarchique indentée (2/4 espaces ou tabulation ; préfixes -, *, 1. facultatifs) en arbre ASCII copiable. Deux styles : cadre Unicode et ASCII classique. Options : lignes guides complètes, espaces de fin, feuilles entre crochets. ## Exemples - [Tailwind CSS Samples](https://elysiatools.com/fr/samples/tailwind-css): Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations - [Exemples du Framework CSS Bulma](https://elysiatools.com/fr/samples/bulma): Exemples du framework CSS Bulma incluant les colonnes, composants, contrôles de formulaire, système de mise en page et modèles de conception modernes basés sur CSS - [Exemples de Sélecteurs CSS](https://elysiatools.com/fr/samples/css-selectors): Collection d'exemples de sélecteurs CSS pour les tests d'extraction et d'analyse - [Echantillons CSS](https://elysiatools.com/fr/samples/css-viewer-samples): Fichiers d exemple pour la visionneuse CSS dans le navigateur