L'Ajudant de Tailwind inspecciona qualsevol element d'una pàgina web i genera un desglossament exhaustiu i categoritzat de les classes d'utilitat Tailwind CSS que hi coincideixen. A diferència d'una simple cadena de classes, organitza els resultats per categoria — Disseny, Espaiat, Tipografia, Colors, Vores i Efectes — perquè entenguis exactament què controla cada classe.
Mentre que Copia com a Tailwind et dóna una cadena de classes ràpida per enganxar, l'Ajudant de Tailwind és el company per a una anàlisi profunda. Està construït per a desenvolupadors que volen entendre la composició completa d'estil d'un element en termes de Tailwind. Cada propietat CSS computada es mapeja al seu equivalent de Tailwind i s'agrupa en categories lògiques. Pots veure d'un cop d'ull que un element utilitza un disseny flex amb alineació items-center, té un padding p-5 amb un gap-3 entre els fills, utilitza text-lg font-bold per a la tipografia i té una aparença bg-slate-900 rounded-lg border border-slate-700. Fes clic a qualsevol etiqueta de classe individual per copiar només aquesta, o utilitza "Copia-ho tot" per agafar la cadena completa. La vista categoritzada facilita la selecció de les classes que necessites en lloc de copiar-ho tot.
Les classes de Tailwind s'organitzen en categories clares: Disseny (flex, grid, position), Espaiat (padding, margin, gap), Tipografia (mida de font, pes, color), Colors (fons, text, vora), Vores (radi, amplada, estil) i Efectes (ombra, opacitat, transform). Cada categoria és desplegable i està clarament etiquetada.
Fes clic en qualsevol element — botons, targetes, capçaleres, entrades, contenidors — i el panell s'omplirà instantàniament amb el desglossament complet de classes Tailwind. L'element es ressaltarà amb una vora porpra perquè sàpigues exactament què s'està inspeccionant.
Cada classe Tailwind es mostra com una etiqueta clicable. Fes clic en qualsevol etiqueta individual (com p-5 o font-bold) per copiar només aquesta classe al teu porta-retalls. Una subtil animació de "copiat" confirma l'acció. Perfecte per quan només necessites una o dues classes específiques.
El botó "Copia totes les classes" a la part inferior genera una cadena neta, separada per espais, de totes les classes Tailwind i la copia al teu porta-retalls. Llest per enganxar directament a className="..." o class="..." .
Cada valor es mapeja a l'escala d'espaiat i mides per defecte de Tailwind. Una font de 16 px es mapeja a text-base, un padding de 24 px es mapeja a p-6 i #7c3aed es mapeja a purple-600. Quan no existeix una coincidència exacta, es tria el valor d'escala més proper i s'indica.
Passa el ratolí per sobre de qualsevol etiqueta de classe Tailwind al panell per veure el valor CSS computat original a partir del qual s'ha generat. Per exemple, en passar el ratolí per sobre de "p-5" es mostra "padding: 20px". Aquesta visió bidireccional t'ajuda a aprendre l'escala de Tailwind connectant les classes amb valors CSS reals.
Ajudant de Tailwind covers the following, organized by category:
flexgridblockinline-flexrelativeabsolutestickyitems-centerjustify-betweengap-*p-* (padding)m-* (margin)px-* py-*mx-autospace-x-*w-* h-*max-w-*min-h-*text-sm / text-base / text-lgfont-normal / font-boldleading-* (line-height)tracking-* (letter-spacing)text-centeruppercasetext-{color}-{shade}bg-{color}-{shade}border-{color}-{shade}opacity-*borderborder-2rounded-* (radius)border-solid / dasheddivide-*shadow-sm / shadow-md / shadow-lgring-*transitionduration-*hover:*A diferència d'una cadena de classes plana, la vista categoritzada et permet entendre la composició completa d'un element. Mira com una targeta utilitza un disseny flex, un espaiat específic, tipografia en negreta, un fons de color pissarra (slate), vores arrodonides i una ombra subtil — cada aspecte en la seva pròpia secció.
Inspecciona un element ben dissenyat en qualsevol lloc web i després recrea'l al teu projecte Tailwind copiant les classes de les categories rellevants. Agafa el disseny d'un element, la tipografia d'un altre i els colors de la teva paleta de marca — barreja i combina.
Passa el ratolí per sobre de les etiquetes de classe per veure els valors CSS d'origen. Aquest mapeig interactiu és la manera més ràpida d'aprendre que p-4 significa 16 px, text-lg significa 18 px o que purple-600 és #7c3aed. Converteix qualsevol lloc web en un exercici d'aprenentatge de Tailwind.
Inspecciona elements al teu propi lloc construït amb Tailwind per verificar que utilitzin espaiats, colors i tipografia coherents amb el sistema de disseny. Detecta valors accidentals puntuals (com p-[13px]) que haurien de ser valors d'escala estàndard (p-3 o p-3.5).
Utilitza Copia com a Tailwind quan necessitis una cadena de classes ràpida per enganxar. Utilitza l'Ajudant de Tailwind quan vulguis estudiar el desglossament, copiar classes individuals de manera selectiva o entendre per què s'han triat classes Tailwind específiques per a cada propietat CSS.
Obre el tauler flotant de DevSuite Pro i fes clic a la icona de l'Ajudant de Tailwind. L'eina s'activa i apareix un panell a la banda dreta, llest per mostrar els desglossaments de classes.
Fes clic a qualsevol element de la pàgina. Es ressaltarà amb una vora porpra i el panell s'omplirà amb les classes de Tailwind categoritzades. Cada categoria (Disseny, Espaiat, Tipografia, Colors, Vores, Efectes) es mostra com una secció amb etiquetes de classe.
Navega per les categories per entendre la composició d'estil completa de l'element. Cada classe és una etiqueta clicable — passa el ratolí per veure el valor CSS d'origen, fes clic per copiar aquesta classe individual.
Fes clic a etiquetes individuals per copiar classes específiques, o utilitza el botó "Copia totes les classes" a la part inferior per agafar-ho tot com una sola cadena. Enganxa-ho directament al teu component Tailwind.
Fes clic a un element diferent de la pàgina per actualitzar instantàniament el panell amb noves classes. No cal desactivar i reactivar — només cal anar clicant per inspeccionar diversos elements en seqüència.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.