Tinutulay ng Copy as Tailwind ang agwat sa pagitan ng visual design at Tailwind CSS code. I-click ang anumang elemento sa isang webpage at agad na makuha ang katumbas na mga Tailwind utility class na nabuo mula sa mga computed CSS style nito — handa nang i-paste sa iyong JSX, Vue template, o HTML file.
Ang pagbuo gamit ang Tailwind CSS ay nangangahulugang mag-isip sa mga utility class sa halip na sumulat ng custom CSS. Ngunit kapag nire-reference mo ang isang kasalukuyang disenyo — maging ito man ay landing page ng kakumpitensya, isang design system na ginawa sa vanilla CSS, o kasalukuyang website ng kliyente — ang mano-manong pagsasalin ng mga visual style sa mga Tailwind class ay nakakaumay at madaling magkamali. Ganap na ino-automate ito ng Copy as Tailwind. Binabasa nito ang mga computed style ng browser para sa anumang elemento at inimamapa ang bawat property sa pinakamalapit na Tailwind utility class gamit ang default scale. Ang mga kulay ay itinutupad sa pinakamalapit na kulay ng Tailwind palette, ang mga spacing value ay naka-snap sa pinakamalapit na rem-based utility, at ang typography ay inimamapa sa mga text-* at font-* class. Ang output ay isang malinis, single-line class string na maaari mong direktang i-paste sa iyong component.
bg-purple-600 text-white
px-7 py-3 rounded-lg
font-semibold text-base
border-2 border-purple-400
I-click ang anumang elemento at ang buong computed CSS nito ay sinusuri nang real-time. Ang bawat naaangkop na property ay inimamapa sa katumbas na Tailwind utility class — mula sa bg-purple-600 hanggang rounded-lg hanggang font-semibold. Agad na nagaganap ang conversion nang walang loading o processing delay.
Hindi lang basta string replacement ang ginagawa ng tool — naiintindihan nito ang design system ng Tailwind. Ang padding na 12px ay inimamapa sa p-3 (hindi isang custom na halaga), ang mga kulay ay itinutupad sa pinakamalapit na shade sa Tailwind palette (hal., ang #7c3aed ay nagiging purple-600), at ang mga font size ay inimamapa sa text-sm, text-base, text-lg, atbp.
Ipinapakita ang nabuong class string sa isang malinis na output panel. I-click ang Copy button nang isang beses at ang buong string ay nasa clipboard mo na — handa nang i-paste sa className="..." sa React, class="..." sa HTML, o :class="..." sa Vue.
Para sa mas mabilis na workflow, i-right-click ang anumang elemento sa pahina para ma-access ang "Copy as Tailwind" direkta mula sa context menu ng browser. Hindi na kailangang buksan ang DevSuite dock — i-right-click lang, mag-click, at nasa clipboard na ang mga class.
Higit pa sa simpleng mapping. Hinahawakan ang mga box shadow (shadow-md, shadow-lg), gradient, border style, flex/grid layout class, opacity value, at maging ang mga responsive-aware na property tulad ng max-width at aspect ratio.
Kasama lang ang mga class na naiiba mula sa mga browser default — walang redundant na utility. Ang output ay maigsi at handa na sa production, hindi puno ng mga class para sa mga inherited o default na halaga.
Copy as 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-*)transitioncursorMuling ginagawa ang isang website mula sa vanilla CSS o Bootstrap patungong Tailwind? I-click ang bawat pangunahing component sa kasalukuyang site, kopyahin ang mga Tailwind class, at gamitin ang mga ito bilang panimula para sa iyong mga bagong Tailwind component. Nakakatipid ng maraming oras ng mano-manong property-to-class na pagsasalin.
Nakakita ng magandang dinisenyang card, hero section, o navigation sa ibang website? I-click ito, kunin ang mga Tailwind class, at gamitin ang mga ito bilang sanggunian para sa pagbuo ng iyong sariling bersyon. Hindi na kailangang mano-manong suriin ang dose-dosenang CSS property.
Kapag nagtatayo ng mga bagong Tailwind component mula sa isang Figma o PSD mockup, ipatupad muna ang disenyo sa browser gamit ang DevTools, pagkatapos ay i-click ang elemento gamit ang Copy as Tailwind para makuha ang eksaktong mga utility class sa halip na isulat ang mga ito nang kamay.
Tiyakin na ang iyong mga mano-manong isinulat na CSS value ay tunay na inimamapa sa mga valid na Tailwind scale value. Kung sumulat ka ng padding: 14px, ipinapakita ng tool kung ito ay bilugan sa p-3 (12px) o p-3.5 (14px) — natutuklasan ang mga pagkakaiba bago pa ma-ship.
Bago sa Tailwind? Mag-click ng mga elemento sa anumang webpage para makita kung paano nagsasalin ang mga tradisyonal na CSS property sa mga utility class. Ito ay isang interactive na paraan upang matuto ng Tailwind class naming system sa pamamagitan ng pagkita ng mga tunay na halimbawa.
Buksan ang DevSuite Pro floating dock at i-click ang icon ng Copy as Tailwind. Naa-activate ang tool at nagbabago ang iyong cursor sa isang crosshair selector, na nagpapahiwatig na maaari ka nang mag-click ng mga elemento.
I-click ang anumang elemento sa pahina — isang button, card, heading, o navigation bar. Na-highlight ang elemento at sinusuri ang computed CSS nito. Lumalabas ang isang floating panel na nagpapakita ng nabuong Tailwind class string.
Ipinapakita ng panel ang buong Tailwind class string na hinati sa mga lohikal na grupo. Makikita mo nang eksakto kung aling CSS property ang inimamapa sa kung aling Tailwind class. Mag-hover sa anumang class para makita ang pinagbabatayan na CSS value na kinakatawan nito.
I-click ang button na "Copy" para makuha ang kumpletong class string. I-paste ito nang direkta sa className ng iyong component, class attribute, o template. Agad na gumagana ang mga class sa isang standard na Tailwind setup.
I-install ang DevSuite Pro nang libre at i-unlock ang 39+ developer tools para sa iyong browser.