Softonic

CSS vers Tailwind

Étape 1 / 2
Convertir en Tailwind

Migrer une feuille de style héritée vers Tailwind règle par règle est fastidieux. Ce convertisseur prend un bloc de CSS brut, avec ou sans sélecteurs et accolades, et réécrit chaque déclaration en tant qu’utilitaire Tailwind. Les paires reconnues correspondent à des utilitaires nommés comme flex, items-center ou rounded-lg, et tout le reste revient à la syntaxe de valeur arbitraire de Tailwind [property:value] afin que rien ne soit silencieusement abandonné.

Comment le convertisseur traite votre CSS

  1. 1

    Collez le CSS

    Collez une règle complète comme `.card { padding: 16px; border-radius: 8px; }` ou juste les déclarations à l'intérieur des accolades.

  2. 2

    Le parseur supprime les commentaires

    Les commentaires de bloc `/* ... */` sont supprimés avant que les déclarations ne soient séparées par des points-virgules.

  3. 3

    Chaque déclaration est mappée

    Les propriétés courantes correspondent à de réels utilitaires Tailwind (espacement, rayon, taille de police, flex, affichage, alignement du texte); les inconnues reviennent à `[prop:value]`.

  4. 4

    Copier et appliquer

    Collez la liste de classes dans l'attribut `class` de l'élément HTML correspondant.

Ce qui est mappé à des utilitaires nommés

Le thème par défaut de Tailwind ne peut pas couvrir toutes les valeurs CSS possibles, donc le convertisseur priorise celles où un utilitaire nommé existe et utilise des valeurs arbitraires ailleurs.

Mappages directs

Déclaration CSS Utilitaire Tailwind
display: flex flex
display: grid grid
display: none hidden
justify-content: center justify-center
align-items: center items-center
text-align: center text-center
font-weight: bold font-bold
cursor: pointer cursor-pointer
overflow: hidden overflow-hidden

Mappages sensibles à l’échelle

Le padding, la marge, la largeur, la hauteur, les dimensions min/max divisent toutes une valeur en px par 4 pour produire un pas d’espacement Tailwind, padding: 16px devient p-4, width: 32px devient w-8. Les valeurs qui ne tombent pas sur un pas propre reviennent à des valeurs arbitraires sur l’utilitaire correspondant, par exemple width: 37px devient w-[37px].

border-radius est mappé à l’utilitaire nommé le plus proche (rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl). Les tailles supérieures à 16px deviennent rounded-full, ce qui est pratique pour les pilules mais incorrect pour des rayons anormalement grands, inspectez la sortie avant de l’expédier.

font-size se répartit en text-xs à text-3xl par seuils de pixels.

Avertissements

  • Les pseudo-classes, les requêtes média et les sélecteurs ne sont pas traduits ; seules les déclarations à l’intérieur des accolades le sont. Vous devez toujours ajouter des variantes comme hover: ou md: vous-même.
  • Les couleurs se retrouvent dans des valeurs arbitraires telles que text-[#1f2937] car le convertisseur ne connaît pas votre palette de thème Tailwind. Remplacez par text-gray-800 ou un jeton personnalisé manuellement.
  • Les propriétés abrégées que vous utilisez rarement (border, background, transition) sont émises telles quelles sous la forme [property:value], vérifiez-les avant de les expédier.

Questions fréquentes

La sortie utilise des noms d’utilitaires qui sont stables entre Tailwind v3 et v4. Les valeurs arbitraires entre crochets sont également valides dans les deux versions. Vous voudrez peut-être re-tokeniser les couleurs dans votre palette @theme v4 après avoir collé.

Le convertisseur n’a pas de visibilité sur votre échelle de couleur tailwind.config.js. Mappez la valeur arbitraire au jeton de palette le plus proche manuellement, par exemple text-gray-800 ou un jeton de marque que vous avez défini.

Oui, collez plusieurs règles. L’outil émettra une liste de classes par sélecteur, séparée par un commentaire /* sélecteur */ afin que vous puissiez les aligner avec le HTML correspondant.

Le CSS est envoyé à notre serveur pour que le convertisseur le transforme en classes Tailwind. Il n’est pas stocké et n’apparaît pas dans le lien de la page.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Générateur de carte CSS

Créez le CSS d’un conteneur de carte : fond, bordure, rayon des angles, espacement intérieur et ombre douce, avec aperçu immédiat et code à copier-coller.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur d’accordéon CSS

Créez un accordéon de trois sections avec details et summary. Personnalisez textes, couleurs, espacements, icône et ouverture, puis copiez ou téléchargez le code.

Recherche de nom de couleur

Trouvez la couleur nommée CSS standardisée la plus proche d’une valeur HEX, RGB ou HSL grâce à l’écart CIEDE2000.

Outil disponible dans d’autres langues