Comment l’utiliser

Quatre étapes : coller, lancer, vérifier, copier. Tout reste dans le navigateur.

Collez votre contenu

Ajoutez du CSS, HTML, JSON ou autre texte. Rien n’est envoyé.

Lancez l’outil

Cliquez sur Convertir ou Exécuter. Le résultat s’affiche tout de suite.

Vérifiez la sortie

Lisez le code généré et les notes avant de l’utiliser.

Copiez et utilisez

Copiez le résultat et collez-le dans votre projet.

À propos de cet outil

L’outil développe les classes utilitaires courantes de Tailwind en déclarations CSS. Les variantes comme hover: ou md: sont signalées dans les notes, car elles supposent un sélecteur dédié ou une media query.

Exemple

L’exemple fourni combine des utilitaires de mise en page et d’espacement.

Entrée

flex items-center gap-4 p-6 rounded-lg bg-white shadow-lg text-gray-900 font-semibold

Sortie

.element {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 0.5rem;
  /* …mapped declarations… */
}

Conseil

Pratique pour comprendre le CSS derrière un utilitaire ou pour maintenir une couche CSS à côté de Tailwind.