Peut-il convertir CSS en Tailwind ?

Oui. Collez un bloc de déclaration CSS et Tailfind l'applique à un exemple d'élément 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éclaration. 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éclaration CSS et convertissez l'échantillon 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 par déclaration en premier: Collez un bloc de déclaration CSS et Tailfind l'applique à un exemple d'élément avant de convertir le résultat rendu en classes Tailwind réutilisables.
Préférence de l'utilitaire par défaut: Les valeurs Tailwind portables par défaut sont conservées lorsque les déclarations correspondent à l’échelle du framework.
Valeur de repli arbitraire: Les valeurs non standard deviennent des classes arbitraires explicites, afin que les pixels, couleurs, ombres et timings personnalisés restent faciles à inspecter.
Sortie sécurisée: L'espacement, le dimensionnement, l'affichage, la grille, la flexion, les bordures, les ombres et la typographie sont mappés à partir de l'échantillon rendu.
Extraction rapide des classes: Le résultat est une liste de classes Tailwind ciblée qui est prête à être copiée dans un composant, un pic de jeton ou une passe de nettoyage.
Bon pour les audits: Utilisez-le pour remplacer les blocs CSS uniques, les expériences de style en ligne et les prototypes de systèmes de conception 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 utility Tailwind portables les plus proches. Il est utile pour des design tokens 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 exemple d'élément avant la conversion, de sorte que les valeurs de disposition, 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éclaration CSS et Tailfind l'applique à un exemple d'élément 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éclaration. 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.

Ignorer la conversion manuelle

Convertir n’importe quelle page en Tailwind CSS propre

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