Copia com a Tailwind tanca la bretxa entre el disseny visual i el codi Tailwind CSS. Fes clic a qualsevol element d'una pàgina web i obté a l'instant les classes d'utilitat Tailwind equivalents generades a partir dels seus estils CSS computats — preparades per enganxar-les al teu JSX, plantilla Vue o fitxer HTML.
Construir amb Tailwind CSS significa pensar en classes d'utilitat en lloc d'escriure CSS personalitzat. Però quan fas referència a un disseny existent — ja sigui la pàgina d'aterratge d'un competidor, un sistema de disseny construït en CSS pur o el lloc web actual d'un client — traduir els estils visuals a classes Tailwind manualment és tediós i propens a errors. Copia com a Tailwind automatitza això completament. Llegeix els estils computats del navegador per a qualsevol element i mapeja cada propietat a la classe d'utilitat Tailwind més propera utilitzant l'escala per defecte. Els colors es fan coincidir amb el color de la paleta de Tailwind més proper, els valors de l'espai s'ajusten a la utilitat basada en rem més propera i la tipografia es mapeja a les classes text-* i font-*. El resultat és una cadena de classes neta d'una sola línia que pots enganxar directament al teu component.
bg-purple-600 text-white
px-7 py-3 rounded-lg
font-semibold text-base
border-2 border-purple-400
Fes clic a qualsevol element i el seu CSS computat complet s'analitzarà en temps real. Cada propietat aplicable es mapeja a la classe d'utilitat Tailwind equivalent — des de bg-purple-600 fins a rounded-lg o font-semibold. La conversió es produeix a l'instant, sense retard de càrrega o processament.
L'eina no només fa una substitució de cadenes — entén el sistema de disseny de Tailwind. Un padding de 12 px es mapeja a p-3 (no a un valor personalitzat), els colors es fan coincidir amb el to més proper de la paleta de Tailwind (per exemple, #7c3aed es converteix en purple-600) i les mides de font es mapegen a text-sm, text-base, text-lg, etc.
La cadena de classes generada es mostra en un panell de resultats net. Fes clic al botó de copiar una vegada i tota la cadena estarà al teu porta-retalls — a punt per enganxar-la a className="..." a React, class="..." a HTML o :class="..." a Vue.
Per a un flux de treball encara més ràpid, fes clic amb el botó dret sobre qualsevol element de la pàgina per accedir a "Copia com a Tailwind" directament des del menú contextual del navegador. No cal obrir el tauler de DevSuite — només cal fer clic amb el botó dret, clicar i les classes estaran al teu porta-retalls.
Va més enllà dels mapejos simples. Gestiona ombres de caixa (shadow-md, shadow-lg), degradats, estils de vora, classes de disseny flex/grid, valors d'opacitat i fins i tot propietats sensibles al disseny reactiu com max-width i aspect-ratio.
Només inclou classes que difereixen dels valors predeterminats del navegador — sense utilitats redundants. El resultat és concís i a punt per a producció, no sobrecarregat amb classes per a valors heretats o per defecte.
Copia com a 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-*)transitioncursorEstàs reconstruint un lloc web des de CSS pur o Bootstrap a Tailwind? Clica cada component principal del lloc existent, copia les classes de Tailwind i utilitza-les com a punt de partida per als teus nous components Tailwind. Estalvia hores de traducció manual de propietats a classes.
Has trobat una targeta, una secció hero o una navegació amb un disseny preciós en un altre lloc web? Clica-la, obté les classes de Tailwind i utilitza-les com a referència per construir la teva pròpia versió. No cal inspeccionar manualment dotzenes de propietats CSS.
Quan construeixis nous components Tailwind a partir d'una maqueta de Figma o PSD, implementa primer el disseny al navegador utilitzant les DevTools, després clica l'element amb Copia com a Tailwind per obtenir les classes d'utilitat exactes en lloc d'escriure-les a mà.
Assegura't que els teus valors CSS escrits a mà es mapegin realment a valors d'escala de Tailwind vàlids. Si has escrit padding: 14px, l'eina et mostrarà si s'arrodoneix a p-3 (12 px) o p-3.5 (14 px), detectant inconsistències abans de publicar.
Ets nou a Tailwind? Clica elements en qualsevol pàgina web per veure com les propietats CSS tradicionals es tradueixen en classes d'utilitat. És una forma interactiva d'aprendre el sistema de noms de classes de Tailwind veient exemples reals.
Obre el tauler flotant de DevSuite Pro i fes clic a la icona Copia com a Tailwind. L'eina s'activa i el cursor canvia a un selector de creu, indicant que ja pots clicar elements.
Clica qualsevol element de la pàgina — un botó, una targeta, una capçalera, una barra de navegació. L'element es ressalta i el seu CSS computat s'analitza. Apareix un panell flotant que mostra la cadena de classes Tailwind generada.
El panell mostra la cadena completa de classes Tailwind dividida en grups lògics. Pots veure exactament quina propietat CSS s'ha mapejat a quina classe Tailwind. Passa el ratolí per sobre de qualsevol classe per veure el valor CSS subjacent que representa.
Fes clic al botó "Copia" per agafar la cadena de classes completa. Enganxa-la directament al className, a l'atribut class o a la plantilla del teu component. Les classes funcionen immediatament amb una configuració de Tailwind estàndard.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.