Copy as Tailwind fait le lien entre le design visuel et le code Tailwind CSS. Cliquez sur n'importe quel élément d'une page web et obtenez instantanément les utility classes Tailwind équivalentes générées à partir de ses styles CSS calculés — prêtes à coller dans votre JSX, votre template Vue ou votre fichier HTML.
Construire avec Tailwind CSS, c'est penser en utility classes plutôt qu'écrire du CSS personnalisé. Mais lorsque vous vous référez à un design existant — qu'il s'agisse de la page d'accueil d'un concurrent, d'un design system construit en vanilla CSS, ou du site actuel d'un client — traduire manuellement les styles visuels en classes Tailwind est fastidieux et source d'erreurs. Copy as Tailwind automatise entièrement ce processus. Il lit les styles calculés du navigateur pour n'importe quel élément et associe chaque propriété à la utility class Tailwind la plus proche en utilisant l'échelle par défaut. Les couleurs sont associées à la couleur de palette Tailwind la plus proche, les valeurs d'espacement s'alignent sur la utility basée sur rem la plus proche, et la typographie est mappée vers les classes text-* et font-*. Le résultat est une chaîne de classes propre sur une seule ligne, que vous pouvez coller directement dans votre composant.
bg-purple-600 text-white
px-7 py-3 rounded-lg
font-semibold text-base
border-2 border-purple-400
Cliquez sur n'importe quel élément et son CSS calculé complet est analysé en temps réel. Chaque propriété applicable est associée à la utility class Tailwind équivalente — de bg-purple-600 à rounded-lg en passant par font-semibold. La conversion s'effectue instantanément, sans délai de chargement ni de traitement.
L'outil ne fait pas que du remplacement de chaînes — il comprend le design system de Tailwind. Un padding de 12px est mappé vers p-3 (pas une valeur personnalisée), les couleurs sont associées à la nuance la plus proche dans la palette Tailwind (par ex., #7c3aed devient purple-600), et les tailles de police sont mappées vers text-sm, text-base, text-lg, etc.
La chaîne de classes générée est affichée dans un panneau de sortie épuré. Cliquez une fois sur le bouton Copier et la chaîne entière se retrouve dans votre presse-papier — prête à être collée dans className="..." en React, class="..." en HTML, ou :class="..." en Vue.
Pour un flux de travail encore plus rapide, faites un clic droit sur n'importe quel élément de la page pour accéder à "Copy as Tailwind" directement depuis le menu contextuel du navigateur. Pas besoin d'ouvrir le dock DevSuite — cliquez droit, cliquez, et les classes sont dans votre presse-papier.
Va au-delà des mappings simples. Gère les box shadows (shadow-md, shadow-lg), les dégradés, les styles de bordure, les classes de layout flex/grid, les valeurs d'opacité, et même les propriétés responsive comme max-width et les ratios d'aspect.
N'inclut que les classes qui diffèrent des valeurs par défaut du navigateur — aucune utility redondante. La sortie est concise et prête pour la production, sans être gonflée de classes pour les valeurs héritées ou par défaut.
Copier en Tailwind covers the following, organized by category:
display (flex, grid, block)position (relative, absolute)flex-directionjustify-contentalign-itemsgapoverflowpadding (p-*)margin (m-*)width (w-*)height (h-*)max-widthmin-heightfont-size (text-*)font-weight (font-*)line-height (leading-*)letter-spacing (tracking-*)text-aligntext-transformcolor (text-*)background-color (bg-*)border-color (border-*)opacityborder-width (border-*)border-radius (rounded-*)border-stylebox-shadow (shadow-*)transform (scale-*, rotate-*)transitioncursorVous reconstruisez un site web depuis vanilla CSS ou Bootstrap vers Tailwind ? Cliquez sur chaque composant principal du site existant, copiez les classes Tailwind et utilisez-les comme point de départ pour vos nouveaux composants Tailwind. Gagne des heures de traduction manuelle propriété par propriété.
Vous avez trouvé une carte, une section hero ou une navigation magnifiquement conçue sur un autre site web ? Cliquez dessus, obtenez les classes Tailwind et utilisez-les comme référence pour construire votre propre version. Pas besoin d'inspecter manuellement des dizaines de propriétés CSS.
Lorsque vous construisez de nouveaux composants Tailwind à partir d'une maquette Figma ou PSD, implémentez d'abord le design dans le navigateur via DevTools, puis cliquez sur l'élément avec Copy as Tailwind pour obtenir les utility classes exactes plutôt que de les écrire à la main.
Assurez-vous que vos valeurs CSS écrites à la main correspondent réellement aux valeurs d'échelle Tailwind valides. Si vous avez écrit padding: 14px, l'outil vous indique si cela arrondit à p-3 (12px) ou p-3.5 (14px) — détectant les incohérences avant qu'elles ne soient déployées.
Débutant avec Tailwind ? Cliquez sur des éléments de n'importe quelle page web pour voir comment les propriétés CSS traditionnelles se traduisent en utility classes. C'est une façon interactive d'apprendre le système de nommage des classes Tailwind en voyant des exemples réels.
Ouvrez le dock flottant DevSuite Pro et cliquez sur l'icône Copy as Tailwind. L'outil s'active et votre curseur se transforme en sélecteur en croix, indiquant que vous pouvez maintenant cliquer sur des éléments.
Cliquez sur n'importe quel élément de la page — un bouton, une carte, un titre, une barre de navigation. L'élément est mis en surbrillance et son CSS calculé est analysé. Un panneau flottant apparaît affichant la chaîne de classes Tailwind générée.
Le panneau affiche la chaîne de classes Tailwind complète, décomposée en groupes logiques. Vous pouvez voir exactement quelle propriété CSS a été mappée vers quelle classe Tailwind. Survolez n'importe quelle classe pour voir la valeur CSS sous-jacente qu'elle représente.
Cliquez sur le bouton "Copier" pour récupérer la chaîne de classes complète. Collez-la directement dans le className, l'attribut class ou le template de votre composant. Les classes fonctionnent immédiatement avec une configuration Tailwind standard.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.