Comment utiliser : Convertisseur CSS vers Tailwind
- Collez des règles CSS (avec sélecteurs) ou simplement des déclarations.
- Consultez la liste de classes générée pour chaque sélecteur.
- Copiez les classes dans votre HTML ou JSX, vérifiez les valeurs arbitraires et remplacez-les par des tokens de votre thème lorsque c'est pertinent.
Comment les valeurs sont converties
L'échelle d'espacement par défaut de Tailwind utilise des paliers de 0,25 rem (4 px) : padding: 16px devient p-4, et margin: 0 auto devient my-0 mx-auto. Les valeurs absentes de l'échelle utilisent la syntaxe des valeurs arbitraires : padding: 13px → p-[13px]. La typographie, les rayons et les graisses correspondent à leurs paliers nommés :
| CSS | Tailwind |
|---|---|
display: flex; flex-direction: column | flex flex-col |
gap: 16px | gap-4 |
font-size: 24px; font-weight: 700 | text-2xl font-bold |
border-radius: 12px | rounded-xl |
background-color: #7c5cff | bg-[#7c5cff] |
width: 100% | w-full |
.btn:hover { color: #fff } | hover:text-white |
Limites à connaître
- Les couleurs deviennent des valeurs arbitraires ; associez-les ensuite à la palette de votre thème (par exemple
bg-violet-500). L'outil variables CSS vers Tailwind vous aide à définir un thème. - Les propriétés sans utilitaire correspondant s'écrivent comme propriétés arbitraires :
[mask-image:url(...)]. - Les media queries, sélecteurs complexes et animations doivent être traduits manuellement en
md:,group-hover:et configuration du thème. !importantdevient le préfixe!.
Pour des valeurs ponctuelles, le générateur de valeurs arbitraires Tailwind crée des classes individuelles, et le générateur de couleurs Tailwind crée des palettes complètes.
Aussi recherché comme : css vers tailwind, convertir css en tailwind, convertisseur tailwind, css to tailwind, générateur classes tailwind css, migrer css vers tailwind, tailwind converter.
Outils complémentaires : Convertisseur CSS vers Tailwind
- Convertisseur PX en REM — Convertissez entre pixels, rem et em avec votre propre taille de police racine, ou collez une feuille de style entière pour convertir toutes les valeurs px d’un coup.
- Formateur CSS — Transformez une feuille de style minifiée en CSS lisible, avec une propriété par ligne et des blocs @media correctement imbriqués.
- Générateur d’animation CSS — Concevez vos animations CSS sur une vraie timeline de keyframes.
- Générateur Keyframes CSS — Un éditeur visuel pour @keyframes.
Questions fréquentes
Est-ce compatible avec Tailwind v4 ?
Oui. Les utilitaires générés et les valeurs arbitraires fonctionnent dans Tailwind v3 et v4.
Pourquoi les couleurs sont-elles écrites en bg-[#hex] ?
Les couleurs exactes sont conservées sous forme de valeurs arbitraires afin que le rendu visuel ne change pas. Remplacez-les par les couleurs de votre thème lorsque vous disposez d'une palette.
Peut-il convertir les media queries ?
Pas automatiquement. Convertissez séparément les règles d'une media query et ajoutez le préfixe responsive adapté, comme
md:.Puis-je installer Convertisseur CSS vers Tailwind en tant qu’application web et l’utiliser hors ligne ?
Oui. Convertisseur CSS vers Tailwind est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.