Convertir CSS en Tailwind en Ligne
Convertis du CSS traditionnel en classes utilitaires Tailwind. Gratuit, dans ton navigateur.
À quoi ça sert
Migre ton CSS vers l'approche utility-first avec Tailwind
Compatible avec Tailwind v3 et v4
Les classes générées sont compatibles avec les versions modernes de Tailwind CSS et le moteur JIT pour les valeurs arbitraires.
100 % privé
Ton CSS est traité dans le navigateur. Jamais envoyé à des serveurs. Idéal pour convertir les styles de projets propriétaires.
Équivalences précises
Correspondance fidèle entre propriétés CSS et classes Tailwind, avec des valeurs arbitraires pour les propriétés sans équivalent exact.
Instantané
Conversion en temps réel. Colle ton CSS et les classes Tailwind apparaissent immédiatement.
Comment ça marche
Trois étapes, sans complications
Colle ton CSS
Saisis le bloc CSS à convertir. Ça peut être un sélecteur avec ses propriétés ou plusieurs règles CSS.
Obtiens les classes Tailwind équivalentes
L'outil associe chaque propriété CSS à sa classe utilitaire Tailwind la plus proche. Les propriétés sans équivalent direct sont affichées comme valeurs arbitraires avec la syntaxe entre crochets.
Copie les classes et applique-les dans ton HTML
Copie les classes générées directement dans l'attribut class de ton élément HTML. Compatible avec Tailwind CSS v3 et v4.
FAQ
Des questions ?
Tailwind CSS est un framework CSS utility-first créé par Adam Wathan et publié en 2017. Au lieu de composants CSS préconçus comme Bootstrap, Tailwind fournit des classes utilitaires de bas niveau (comme `flex`, `pt-4`, `text-gray-700`) que tu composes directement dans ton HTML. Cela élimine le besoin d'écrire du CSS personnalisé pour la plupart des styles et favorise la cohérence du design.
L'outil convertit la plupart des propriétés CSS courantes : layout (display, flexbox, grid, position), espacement (margin, padding), typographie (font-size, font-weight, line-height, color), arrière-plans, bordures, ombres, opacité et plus encore. Les propriétés sans équivalent exact dans Tailwind sont exprimées avec la syntaxe des valeurs arbitraires, comme `w-[123px]` ou `bg-[#1a2b3c]`.
Tailwind inclut un système de valeurs arbitraires qui permet d'utiliser n'importe quelle valeur CSS entre crochets : `w-[37px]`, `text-[#ff6600]`, `grid-cols-[1fr_2fr_1fr]`. Cela signifie que toute propriété CSS peut être exprimée en Tailwind même sans classe prédéfinie pour cette valeur exacte. Les valeurs arbitraires sont compilées par le moteur JIT (Just-In-Time) de Tailwind et n'apparaissent dans le CSS final que si elles sont utilisées.
Cet outil convertit les propriétés CSS de base sans variantes d'état. Les pseudo-sélecteurs comme :hover, :focus, :active et les media queries s'expriment dans Tailwind avec des préfixes comme `hover:`, `focus:`, `md:`, `lg:`. Pour du CSS avec des états complexes, le résultat peut servir de point de départ auquel tu ajoutes manuellement les préfixes de variante nécessaires.
Évite la conversion quand le CSS contient des animations complexes avec @keyframes, quand il utilise des propriétés expérimentales ou spécifiques au navigateur sans support Tailwind, quand le projet n'utilise pas Tailwind et que l'ajouter représenterait un changement architectural majeur, ou quand le CSS est déjà bien organisé avec BEM ou CSS Modules et que l'équipe préfère cette méthode. Tailwind brille dans les nouveaux projets ou les refactorings complets.
Adoption de Tailwind CSS 2020-2026 : utility-first vs CSS sémantique et stratégies de migration
Tailwind CSS a été créé par Adam Wathan et Steve Schoger, publié en 2017. La version 1.0 est arrivée en 2019, la v2 en novembre 2020 avec le mode sombre et le JIT (initialement en plugin), et la v3 en décembre 2021 avec le moteur JIT intégré par défaut. La v4 (2024-2025) a réécrit le moteur en Rust pour une compilation encore plus rapide. Tailwind est devenu la bibliothèque CSS la plus téléchargée sur npm, dépassant Bootstrap.
Le débat utility-first vs CSS sémantique est l'un des plus vifs dans la communauté frontend. Les détracteurs de Tailwind avancent qu'il mélange structure et présentation dans le HTML (contraire au principe de séparation des responsabilités), que le HTML avec de nombreuses classes Tailwind est difficile à lire, et que le CSS généré peut être volumineux sans purge correcte. Les partisans répondent qu'il élimine le problème du nommage des classes CSS, rend le design plus cohérent et simplifie la maintenance en plaçant les styles avec le markup.
Migrer des projets existants de CSS traditionnel ou de Bootstrap vers Tailwind est un processus progressif. Les stratégies courantes incluent la migration composant par composant, l'utilisation de @apply pour préserver la séparation des fichiers CSS pendant la transition, et l'adoption de Tailwind uniquement pour les nouveaux composants tout en conservant le CSS existant. Des outils comme ce convertisseur facilitent la phase initiale de migration en automatisant la traduction des propriétés CSS vers leur équivalent Tailwind.