Sinisiyasat ng Tailwind Helper ang kahit anong element sa isang webpage at gumagawa ng komprehensibo at kategorisadong breakdown ng mga katugmang Tailwind CSS utility classes. Hindi tulad ng isang simpleng class string, inaayos nito ang mga resulta ayon sa kategorya — Layout, Spacing, Typography, Colors, Borders, at Effects — para maunawaan mo nang eksakto kung ano ang kinokontrol ng bawat class.
Habang ang Copy as Tailwind ay nagbibigay sa iyo ng mabilis na class string para i-paste, ang Tailwind Helper ang kasama para sa mas malalim na pagsusuri. Ito ay ginawa para sa mga developer na gustong maunawaan ang kumpletong style composition ng isang element sa mga termino ng Tailwind. Ang bawat computed CSS property ay inilalagay sa katumbas na Tailwind at inigroupo sa mga lohikal na kategorya. Makikita mo sa isang tingin na ang isang element ay gumagamit ng flex layout na may items-center alignment, may p-5 padding na may gap-3 sa pagitan ng mga child, gumagamit ng text-lg font-bold para sa typography, at may bg-slate-900 rounded-lg border border-slate-700 na anyo. I-click ang kahit anong individual na class tag para kopyahin lamang iyon, o gamitin ang "Copy All" para kunin ang kumpletong string. Ang kategorisadong view ay nagpapadali ng pagpili ng eksaktong mga class na kailangan mo kaysa kopyahin ang lahat.
Ang mga Tailwind class ay inayos sa malinaw na mga kategorya: Layout (flex, grid, position), Spacing (padding, margin, gap), Typography (font size, weight, color), Colors (background, text, border), Borders (radius, width, style), at Effects (shadow, opacity, transform). Ang bawat kategorya ay maaaring i-collapse at malinaw na may label.
Mag-click sa kahit anong element — mga button, card, heading, input, container — at agad na mapupuno ang panel ng kumpletong Tailwind class breakdown. Ang element ay hina-highlight ng purple border para malaman mo nang eksakto kung ano ang sinusuri.
Ang bawat Tailwind class ay ipinapakita bilang isang clickable na tag. Mag-click ng kahit anong single tag (tulad ng p-5 o font-bold) para kopyahin lamang ang class na iyon sa iyong clipboard. Ang isang mahinang animation na "copied" ay nagkukumpirma ng aksyon. Perpekto kapag kailangan mo lamang ng isa o dalawang tiyak na class.
Ang button na "Copy All Classes" sa ibaba ay gumagawa ng malinis na space-separated na string ng lahat ng Tailwind class at kinokopya ito sa iyong clipboard. Handa nang i-paste sa className="..." o class="..." nang direkta.
Ang bawat value ay inilalagay sa default na spacing at sizing scale ng Tailwind. Ang 16px na font ay nagiging text-base, ang 24px na padding ay nagiging p-6, at ang #7c3aed ay nagiging purple-600. Kapag walang eksaktong tugma, pinipili at isinasaalang-alang ang pinakamalapit na scale value.
Mag-hover sa kahit anong Tailwind class tag sa panel para makita ang orihinal na computed CSS value na pinagmulan nito. Halimbawa, ang pag-hover sa "p-5" ay nagpapakita ng "padding: 20px". Ang two-way na view na ito ay tumutulong sa iyo na matutunan ang Tailwind scale sa pamamagitan ng pagkonekta ng mga class sa tunay na CSS value.
Tailwind Helper 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:*Hindi tulad ng isang flat na class string, ang kategorisadong view ay nagpapahintulot sa iyo na maunawaan ang kumpletong komposisyon ng isang element. Makita na ang isang card ay gumagamit ng flex layout, tiyak na padding, bold na typography, isang slate na background, rounded na border, at isang mahinang shadow — ang bawat aspeto ay nasa sariling seksyon.
Suriin ang isang maayos na dinisenyo na element sa kahit anong website, pagkatapos ay likhain ito muli sa iyong Tailwind project sa pamamagitan ng pagkopya ng mga kaugnay na class sa kategorya. Kunin ang layout mula sa isang element, typography mula sa isa pa, at mga kulay mula sa iyong brand palette — mag-mix and match.
Mag-hover sa mga class tag para makita ang mga CSS source value. Ang interactive na mapping na ito ang pinakamabilis na paraan para matutunan na ang p-4 ay nangangahulugang 16px, ang text-lg ay nangangahulugang 18px, o na ang purple-600 ay #7c3aed. Gawing Tailwind learning exercise ang kahit anong website.
Suriin ang mga elemento sa iyong sariling Tailwind-built na site para ma-verify na gumagamit sila ng consistent na spacing, colors, at typography mula sa design system. Tukuyin ang mga aksidenteng one-off value (tulad ng p-[13px]) na dapat ay standard scale values (p-3 o p-3.5).
Gamitin ang Copy as Tailwind kapag kailangan mo ng mabilis na class string para i-paste. Gamitin ang Tailwind Helper kapag gusto mong pag-aralan ang breakdown, kopyahin ang mga individual na class nang pili-pili, o maunawaan kung bakit pinili ang mga tiyak na Tailwind class para sa bawat CSS property.
Buksan ang DevSuite Pro floating dock at i-click ang icon ng Tailwind Helper. Ina-activate ang tool at isang panel ang lilitaw sa kanang bahagi, handa na magpakita ng mga class breakdown.
Mag-click ng kahit anong element sa page. Ito ay hina-highlight ng purple border, at ang panel ay mapupuno ng mga kategorisadong Tailwind class. Ang bawat kategorya (Layout, Spacing, Typography, Colors, Borders, Effects) ay ipinapakita bilang isang seksyon na may mga class tag.
Mag-browse sa mga kategorya para maunawaan ang kumpletong style composition ng element. Ang bawat class ay isang clickable na tag — mag-hover para makita ang source CSS value, mag-click para kopyahin ang individual na class na iyon.
Mag-click ng mga individual na tag para kopyahin ang mga tiyak na class, o gamitin ang button na "Copy All Classes" sa ibaba para kunin ang lahat bilang isang string. I-paste nang direkta sa iyong Tailwind component.
Mag-click ng ibang element sa page para agad na ma-update ang panel ng mga bagong class. Hindi na kailangan pang i-deactivate at i-reactivate — patuloy lang mag-click para suriin ang maraming elemento nang sunud-sunod.
I-install ang DevSuite Pro nang libre at i-unlock ang 39+ developer tools para sa iyong browser.