Aller au contenu
Numio

Convertir CSS en classes Tailwind CSS — Numio

Convertissez des déclarations CSS en classes utilitaires Tailwind CSS, affichées sous forme de règles @apply pour chaque sélecteur. Utilisez-le pour trouver les utilitaires correspondants lors de la migration de styles existants. Le convertisseur cible Tailwind CSS v3.

Trouver les utilitaires Tailwind qui correspondent à des règles CSS existantes pendant une migration.

CSS

TailwindCSS 3.x

Quand l’utiliser

  • Trouver les utilitaires Tailwind qui correspondent à des règles CSS existantes pendant une migration.
  • Apprendre les noms de classes Tailwind en convertissant du CSS que vous connaissez déjà.

Mode d’emploi

  1. Collez des règles CSS.
  2. Ajustez la valeur de base de rem ou la configuration Tailwind si votre projet utilise des réglages personnalisés.
  3. Copiez les classes qui suivent @apply dans votre balisage ou votre feuille de style, puis vérifiez le résultat dans votre projet Tailwind.

Entrée CSS

.card { display: flex; padding: 1rem; }

Sortie Tailwind (échelle par défaut)

.card {
  @apply flex p-4;
}

Détails et limites

Les noms de classes et les échelles suivent Tailwind CSS v3. La compatibilité avec la configuration et la syntaxe de Tailwind CSS v4 n’est pas garantie.

Les valeurs personnalisées, les sélecteurs complexes et les pseudo-éléments peuvent ne pas être convertis. Le rendu identique n’est pas garanti : vérifiez-le sur la vraie page.

Le champ de configuration personnalisée est évalué comme du JavaScript dans votre navigateur. Ne collez pas de configuration dont vous n’êtes pas sûr.

FAQ

Tailwind CSS v4 est-il pris en charge ?

Le convertisseur utilise les noms de classes et les échelles de Tailwind CSS v3. Beaucoup d’utilitaires, comme flex, p-4 et text-sm, gardent leur nom en v4, mais la v4 déplace la configuration dans le CSS et renomme certains utilitaires : vérifiez donc la sortie dans votre projet v4.

Comment utiliser des noms de classes au lieu de @apply ?

Copiez la liste qui suit @apply dans l’attribut class de l’élément, par exemple class="flex p-4". La forme @apply regroupe les classes par sélecteur d’origine.

Peut-il convertir des classes Bootstrap en Tailwind ?

Non. Il convertit des déclarations CSS, pas des noms de classes d’un autre framework. Collez les règles CSS qui se trouvent derrière un composant Bootstrap pour voir les utilitaires correspondants.

Pourquoi certaines déclarations ne sont-elles pas converties ?

Les valeurs hors de l’échelle Tailwind, les sélecteurs complexes et les pseudo-éléments peuvent n’avoir aucun utilitaire direct. Gardez-les en CSS ou ajoutez-les à votre configuration Tailwind.