UUUP Tools

Outils de design

CSS vers Tailwind – Mappeur de déclaration

Collez les déclarations CSS et mappez-les aux classes d'utilitaires Tailwind lorsque cela est possible. Les règles communes de disposition, d'espacement et de couleur deviennent des classes standard ; les valeurs sans correspondance reviennent à une syntaxe de valeurs arbitraires.

Accès rapide→HTML vers JSX
CSSTailwindConversion
Accès rapide:HTML vers JSXAide-mémoire des couleurs TailwindGénérateur de grilles Tailwind

Ajouter cet outil aux favoris

Aucun mode de stockage des favoris n’a été sélectionné.

Actions rapides

Retour à Outils de design Parcourir tous les outils

Copiez l’URL de cet outil ou ouvrez la feuille de partage du système sur un appareil compatible.

Cas d’usage

  • Convertir des exemples de CSS en classes Tailwind
  • Nettoyer les exportations de style de déclaration à partir des outils de conception
  • Découvrir quelles règles reviennent à l'arbitraire valeurs

Mode d’emploi

  1. Coller une liste de déclarations CSS
  2. Examiner les classes générées et les règles ignorées/arbitraires
  3. Copier la liste des classes

Exemples d’entrée et de sortie

CSS

padding-left: 32px;

Tailwind

pl-8

FAQ

Les requêtes @media sont-elles prises en charge ?

L'outil se concentre sur les déclarations plates. Les requêtes multimédias et les sélecteurs imbriqués ne sont pas entièrement gérés.

Que faire si aucune classe ne correspond ?

Il essaie des formes à valeurs arbitraires telles que bg-[#ff0000] et répertorie les fragments ignorés si nécessaire.

Outils

Outils associés

Poursuivez avec un autre outil traduit pour une tâche proche.

HTML vers JSX

HTML vers JSX — Convertisseur d’attributs React

Disponible

Convertissez des extraits HTML en React JSX dans le navigateur. Renommez class/for en className/htmlFor, fermez les balises void et convertissez les styles en ligne en forme d'objet. La conversion reste locale.

HTML JSX React
Ouvrir l’outil

Aide-mémoire des couleurs Tailwind

Aide-mémoire des couleurs Tailwind — Nuancier complet

Disponible

Parcourez les échelles de couleurs CSS Tailwind (y compris 50 à 950 étapes) sur un seul tableau. Recherchez par nom, échelle ou HEX, puis copiez les noms de classe utilitaires ou les valeurs HEX brutes pour les projets CSS.

Conception Tailwind CSS
Ouvrir l’outil

Générateur de grilles Tailwind

Générateur de grilles Tailwind — Classes et aperçu

Disponible

Générez des classes de grille Tailwind à partir du nombre de colonnes, de l'espacement et du nombre d'éléments, avec un aperçu en direct. Utile pour les grilles de cartes, les prototypes et les essais rapides de mise en page.

Tailwind Grille Mise en page
Ouvrir l’outil