Peut-il convertir CSS en Tailwind ?

Oui. Collez un bloc de déclarations CSS et Tailfind l'applique à un élément d'exemple avant d'exporter la liste de classes Tailwind la plus proche.

Les valeurs personnalisées sont-elles conservées ?

Tailfind mappe les valeurs aux utilitaires Tailwind par défaut lorsque cela est possible et conserve les valeurs autres que par défaut visibles en tant qu'utilitaires arbitraires au lieu de les masquer.

Dois-je coller une feuille de style complète ?

Le convertisseur CSS est conçu pour les blocs de déclarations. Utilisez le convertisseur HTML/CSS lorsque des sélecteurs, des classes, un balisage imbriqué ou une feuille de style plus complète sont nécessaires.

Convertisseur CSS en Tailwind

Collez un bloc de déclarations CSS et convertissez l'exemple rendu en classes Tailwind que vous pouvez copier dans des composants.

CSS

Tailwind v4

Aucune sortie pour l'instant

La sortie Tailwind générée apparaît ici automatiquement.

Convertisseur Tailwind au pixel près

Convertir CSS en classes Tailwind propres

Conversion à partir des déclarations: Collez un bloc de déclarations CSS et Tailfind l'applique à un élément d'exemple avant de convertir le résultat rendu en classes Tailwind réutilisables.
Préférence pour les utilitaires par défaut: Les valeurs Tailwind portables par défaut sont conservées lorsque les déclarations correspondent à l’échelle du framework.
Fallback pour valeurs arbitraires: Les valeurs non standard deviennent des classes arbitraires explicites, afin que les pixels, couleurs, ombres et timings personnalisés restent faciles à inspecter.
Sortie stable côté mise en page: L'espacement, le dimensionnement, l'affichage, la grille, le flex, les bordures, les ombres et la typographie sont mappés à partir de l'exemple rendu.
Extraction rapide des classes: Le résultat est une liste de classes Tailwind ciblée, prête à être copiée dans un composant, un prototype de tokens ou une passe de nettoyage.
Bon pour les audits: Utilisez-le pour remplacer les blocs CSS ponctuels, les essais de styles inline et les prototypes de design system par des utilitaires Tailwind plus clairs.

Guide du convertisseur CSS

Transformez les déclarations CSS en utilitaires Tailwind

Le convertisseur CSS vers Tailwind transforme un bloc de déclarations en classes utilitaires Tailwind portables les plus proches. Il est utile pour des tokens de design ponctuels, le nettoyage de styles inline et le déplacement de petits extraits CSS dans le balisage de composants.

Tailfind applique les déclarations à un élément d'exemple avant la conversion, de sorte que les valeurs de mise en page, d'espacement, de couleur, de bordure, d'ombre, de typographie et de dimensionnement sont interprétées via le même chemin de rendu du navigateur que celui utilisé par l'extension.

Utilisez-le pour convertir les propriétés CSS en classes Tailwind, vérifier quelles valeurs correspondent à l'échelle Tailwind par défaut et conserver les valeurs autres que par défaut explicites en tant qu'utilitaires arbitraires.

Peut-il convertir CSS en Tailwind ?: Oui. Collez un bloc de déclarations CSS et Tailfind l'applique à un élément d'exemple avant d'exporter la liste de classes Tailwind la plus proche.
Les valeurs personnalisées sont-elles conservées ?: Tailfind mappe les valeurs aux utilitaires Tailwind par défaut lorsque cela est possible et conserve les valeurs autres que par défaut visibles en tant qu'utilitaires arbitraires au lieu de les masquer.
Dois-je coller une feuille de style complète ?: Le convertisseur CSS est conçu pour les blocs de déclarations. Utilisez le convertisseur HTML/CSS lorsque des sélecteurs, des classes, un balisage imbriqué ou une feuille de style plus complète sont nécessaires.

Ignorez la conversion manuelle

Convertissez une page en direct
en Tailwind CSS

Tailfind amène le convertisseur à votre navigateur, afin que vous puissiez capturer l'interface utilisateur de production directement à partir de la page que vous consultez.

Plus d'informations

Télécharger