Tailwind Helper inspectează orice element de pe o pagină web și generează o defalcare cuprinzătoare și categorizată a claselor utilitare Tailwind CSS corespunzătoare. Spre deosebire de un simplu șir de clase, organizează rezultatele pe categorii — Layout, Spacing, Typography, Colors, Borders și Effects — astfel încât să înțelegi exact ce controlează fiecare clasă.
În timp ce Copy as Tailwind îți oferă un șir de clase rapid de lipit, Tailwind Helper este companionul pentru analiză aprofundată. Este creat pentru dezvoltatorii care vor să înțeleagă compoziția completă a stilurilor unui element în termeni Tailwind. Fiecare proprietate CSS calculată este mapată la echivalentul său Tailwind și grupată în categorii logice. Poți vedea dintr-o privire că un element folosește layout flex cu aliniere items-center, are padding p-5 cu un gap-3 între copii, utilizează text-lg font-bold pentru tipografie și are o aparență bg-slate-900 rounded-lg border border-slate-700. Apasă pe orice etichetă de clasă individuală pentru a copia doar acea clasă sau folosește "Copy All" pentru a prelua șirul complet. Vizualizarea categorizată facilitează alegerea exactă a claselor de care ai nevoie, în loc să copiezi totul.
Clasele Tailwind sunt organizate în categorii clare: Layout (flex, grid, position), Spacing (padding, margin, gap), Typography (dimensiunea fontului, grosime, culoare), Colors (fundal, text, border), Borders (radius, lățime, stil) și Effects (shadow, opacity, transform). Fiecare categorie poate fi restrânsă și este clar etichetată.
Apasă pe orice element — butoane, carduri, titluri, câmpuri de intrare, containere — și panoul se populează instant cu defalcarea completă a claselor Tailwind. Elementul este evidențiat cu un border purple astfel încât să știi exact ce este inspectat.
Fiecare clasă Tailwind este afișată ca o etichetă pe care se poate face click. Apasă pe orice etichetă individuală (precum p-5 sau font-bold) pentru a copia doar acea clasă în clipboard. O animație subtilă "copied" confirmă acțiunea. Perfect când ai nevoie doar de una sau două clase specifice.
Butonul "Copy All Classes" din partea de jos generează un șir curat, separat prin spații, cu toate clasele Tailwind și îl copiază în clipboard. Gata de lipit direct în className="..." sau class="...".
Fiecare valoare este mapată la scala implicită de spacing și dimensionare a Tailwind. Un font de 16px se mapează la text-base, un padding de 24px se mapează la p-6, iar #7c3aed se mapează la purple-600. Când nu există o potrivire exactă, este aleasă cea mai apropiată valoare a scalei și aceasta este menționată.
Plasează cursorul peste orice etichetă de clasă Tailwind din panou pentru a vedea valoarea CSS calculată originală din care a fost generată. De exemplu, plasând cursorul peste "p-5" se afișează "padding: 20px". Această vizualizare bidirecțională te ajută să înveți scala Tailwind conectând clasele cu valorile CSS reale.
Assistente 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:*Spre deosebire de un șir plat de clase, vizualizarea categorizată îți permite să înțelegi compoziția completă a unui element. Vezi că un card folosește layout flex, padding specific, tipografie bold, un fundal slate, border-uri rotunjite și o shadow subtilă — fiecare aspect în propria sa secțiune.
Inspectează un element bine conceput de pe orice website, apoi recreează-l în proiectul tău Tailwind copiind clasele de categorie relevante. Ia layout-ul de la un element, tipografia de la altul și culorile din paleta brandului tău — combină și potrivește.
Plasează cursorul peste etichetele de clase pentru a vedea valorile CSS sursă. Această mapare interactivă este cel mai rapid mod de a învăța că p-4 înseamnă 16px, text-lg înseamnă 18px sau că purple-600 este #7c3aed. Transformă orice website într-un exercițiu de învățare Tailwind.
Inspectează elementele de pe propriul site construit cu Tailwind pentru a verifica dacă folosesc spacing, culori și tipografie consistente din sistemul de design. Identifică valori accidentale one-off (precum p-[13px]) care ar trebui să fie valori standard ale scalei (p-3 sau p-3.5).
Folosește Copy as Tailwind când ai nevoie de un șir de clase rapid de lipit. Folosește Tailwind Helper când vrei să studiezi defalcarea, să copiezi clase individuale selectiv sau să înțelegi de ce au fost alese clase Tailwind specifice pentru fiecare proprietate CSS.
Deschide bara flotantă DevSuite Pro și apasă pe pictograma Tailwind Helper. Instrumentul se activează și un panou apare în partea dreaptă, gata să afișeze defalcările de clase.
Apasă pe orice element de pe pagină. Acesta este evidențiat cu un border purple, iar panoul se populează cu clasele Tailwind categorizate. Fiecare categorie (Layout, Spacing, Typography, Colors, Borders, Effects) este afișată ca o secțiune cu etichete de clase.
Navighează prin categorii pentru a înțelege compoziția completă a stilurilor elementului. Fiecare clasă este o etichetă pe care se poate face click — plasează cursorul pentru a vedea valoarea CSS sursă, apasă pentru a copia acea clasă individuală.
Apasă pe etichetele individuale pentru a copia clase specifice sau folosește butonul "Copy All Classes" din partea de jos pentru a prelua totul ca un singur șir. Lipește direct în componenta ta Tailwind.
Apasă pe un element diferit de pe pagină pentru a actualiza instantaneu panoul cu clase noi. Nu este nevoie să dezactivezi și să reactivezi — continuă să apeși pentru a inspecta mai multe elemente în secvență.
Instalează DevSuite Pro gratuit și deblochează peste 39 de instrumente pentru dezvoltatori în browserul tău.