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.

Elysia Tools

Navigation mobile

Development

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.

Détails

Ce que cet outil vous aide à faire

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.

Exécution

Exécuter cet outil

Remplissez le formulaire, lancez l’outil et consultez le résultat au même endroit.

Exécutions d’exemple préparées

Cliquez sur un exemple pour remplir automatiquement le formulaire. Les fichiers doivent toujours être téléversés.

2 exemples

Classes de carte

Une carte typique : layout flex, padding, gap, fond au survol, padding responsive, bordures arrondies et ombre.

<div class="tw-root">8 classes recognized. Outputs .my-class { display:flex; gap:1rem; ... } plus a :hover block and an @media (min-width:768px) block.</div>

Bouton avec état et modificateur d'opacité

Montre comment la syntaxe bg-blue-500/75 se développe en rgba() et les variantes hover/focus.

<div class="tw-root">7 classes recognized. bg-blue-500/75 expands to rgba(59,130,246,0.75). Outputs .btn plus .btn:hover and .btn:focus blocks.</div>

Entrées

Renseignez les champs nécessaires, puis lancez l’outil.

2 réglages

ContenuCollez ou saisissez les valeurs principales.1

Classes TailwindtextareaRequis

RéglagesAjustez formats, plages, nombres et modes.1

Sélecteur de portéeselectOptionnel

Résultat

Prêt à exécuter

Après exécution, les fichiers, textes, données structurées ou sorties en flux apparaîtront ici.

Exemples

Exemples adaptés à cet outil

Associé

Classes Tailwind vers CSS

Ce que cet outil vous aide à faire

Exécuter cet outil

Exécutions d’exemple préparées

Entrées

Résultat

Exemples adaptés à cet outil

Continuer avec des outils et dossiers associés

Exécutions d’exemple préparées

Entrées

Résultat

Découvrez quand utiliser cet outil, ce qu'il prend en charge et comment les utilisateurs l'appliquent.

Points clés

Aperçu

Quand l’utiliser

Fonctionnement

Cas d’usage

Exemples

1. Conversion d'une carte responsive

2. Bouton interactif avec opacité

FAQ

Tailwind CSS Samples

Exemples du Framework CSS Bulma

Exemples de Sélecteurs CSS

Echantillons CSS

Convertisseur Markdown en PDF

Convertisseur Markdown vers HTML

Convertisseur HTML vers Markdown

Explorateur d’Expressions Cron

Outils d’export, d’OCR et de conversion Markdown

Outils de redaction et de publication Markdown

Outils de Redaction, d Extraction et de Publication de Documentation

Outils d encodage et de conversion audio