Kopiraj kot Tailwind

Gradnja s Tailwind CSS znači razmišljanje u utility klasama umjesto pisanja prilagođenog CSS-a. Ali kada referencirate postojeći dizajn — bilo da je to odredišna stranica konkurenta, design system izgrađen u vanilla CSS-u ili trenutna web stranica klijenta — ručno prevođenje vizualnih stilova u Tailwind klase zamorno je i sklono pogreškama. Copy as Tailwind u potpunosti automatizira ovaj proces. Čita browser computed stilove za bilo koji element i mapira svako svojstvo na najbližu Tailwind utility klasu koristeći zadanu skalu. Boje se usklađuju s najbližom bojom Tailwind palete, vrijednosti razmaka priskaču na najbližu rem-baziranu utility klasu, a tipografija se mapira na text-* i font-* klase. Rezultat je čist, jednolinijski niz klasa koji možete zalijepiti izravno u svoju komponentu.

Ključne značajke

Trenutna pretvorba CSS-a u Tailwind

Kliknite bilo koji element i njegov puni computed CSS analizira se u stvarnom vremenu. Svako primjenjivo svojstvo mapira se na ekvivalentnu Tailwind utility klasu — od bg-purple-600 do rounded-lg do font-semibold. Pretvorba se odvija trenutno bez kašnjenja učitavanja ili obrade.

Pametno mapiranje klasa

Alat ne radi samo zamjenu nizova — razumije Tailwindov design system. Padding od 12px mapira se na p-3 (ne na prilagođenu vrijednost), boje se usklađuju s najbližom nijansom u Tailwind paleti (npr. #7c3aed postaje purple-600), a veličine fontova mapiraju se na text-sm, text-base, text-lg itd.

Kopiranje u međuspremnik jednim klikom

Generirani niz klasa prikazuje se u čistom izlaznom panelu. Kliknite gumb Copy jednom i cijeli niz nalazi se u vašem međuspremniku — spreman za lijepljenje u className="..." u Reactu, class="..." u HTML-u ili :class="..." u Vueu.

Integracija kontekstnog izbornika

Za još brži radni tijek, desnom tipkom miša kliknite bilo koji element na stranici kako biste pristupili opciji "Copy as Tailwind" izravno iz browser kontekstnog izbornika. Nema potrebe za otvaranjem DevSuite docka — samo desni klik, klik, i klase su u vašem međuspremniku.

Rukovanje složenim svojstvima

Ide dalje od jednostavnih mapiranja. Rukuje box shadowima (shadow-md, shadow-lg), gradijentima, border stilovima, flex/grid layout klasama, vrijednostima opacity i čak responzivno svjesnim svojstvima poput max-width i omjera stranica.

Čist i minimalan izlaz

Uključuje samo klase koje se razlikuju od browser zadanih vrijednosti — bez redundantnih utility klasa. Izlaz je sažet i spreman za produkciju, nije napuhan klasama za naslijeđene ili zadane vrijednosti.

Što možete pregledati

Kopiraj kot Tailwind covers the following, organized by category:

Layout

display (flex, grid, block)
position (relative, absolute)
flex-direction
justify-content
align-items
gap
overflow

Spacing

padding (p-*)
margin (m-*)
width (w-*)
height (h-*)
max-width
min-height

Tipografija

font-size (text-*)
font-weight (font-*)
line-height (leading-*)
letter-spacing (tracking-*)
text-align
text-transform

Boje

color (text-*)
background-color (bg-*)
border-color (border-*)
opacity

Borders

border-width (border-*)
border-radius (rounded-*)
border-style

Efekti

box-shadow (shadow-*)
transform (scale-*, rotate-*)
transition
cursor

Uobičajeni primjeri upotrebe

Migracija postojeće stranice na Tailwind

Pregradite web stranicu iz vanilla CSS-a ili Bootstrapa na Tailwind? Kliknite svaku glavnu komponentu na postojećoj stranici, kopirajte Tailwind klase i koristite ih kao polazišnu točku za vaše nove Tailwind komponente. Štedi sate ručnog prevođenja svojstava u klase.

Obrnuto inžinjerstvo dizajnerskih obrazaca

Pronašli ste lijepo dizajniranu karticu, hero sekciju ili navigaciju na drugoj web stranici? Kliknite je, dobijte Tailwind klase i koristite ih kao referencu za izgradnju vlastite verzije. Nema potrebe za ručnim pregledavanjem desetaka CSS svojstava.

Ubrzavanje razvoja komponenti

Kada gradite nove Tailwind komponente iz Figma ili PSD mockupa, prvo implementirajte dizajn u browseru koristeći DevTools, zatim kliknite element s Copy as Tailwind kako biste dobili točne utility klase umjesto da ih pišete ručno.

Dosljednost prijevoda design tokena

Osigurajte da vaše ručno pisane CSS vrijednosti stvarno mapiraju na valjane Tailwind vrijednosti skale. Ako ste napisali padding: 14px, alat vam pokazuje zaokružuje li se to na p-3 (12px) ili p-3.5 (14px) — hvatajući nedosljednosti prije nego što se isporuče.

Poučavanje i učenje Tailwinda

Novi ste u Tailwindu? Kliknite elemente na bilo kojoj web stranici kako biste vidjeli kako se tradicionalna CSS svojstva prevode u utility klase. To je interaktivan način učenja Tailwind sustava imenovanja klasa gledanjem stvarnih primjera.

Kako koristiti

Aktivirajte Copy as Tailwind

Otvorite DevSuite Pro plutajući dock i kliknite ikonu Copy as Tailwind. Alat se aktivira i vaš kursor se mijenja u selektor s ciljnikom, što označava da sada možete klikati elemente.

Kliknite ciljni element

Kliknite bilo koji element na stranici — gumb, karticu, naslov, navigacijsku traku. Element se označava i njegovi computed CSS stilovi se analiziraju. Pojavljuje se plutajući panel koji prikazuje generirani Tailwind niz klasa.

Pregledajte generirane klase

Panel prikazuje puni Tailwind niz klasa rastavljen u logičke grupe. Možete točno vidjeti koje CSS svojstvo je mapirano na koju Tailwind klasu. Zadržite pokazivač iznad bilo koje klase kako biste vidjeli temeljnu CSS vrijednost koju predstavlja.

Kopirajte i zalijepite u vaš kod

Kliknite gumb "Copy" kako biste preuzeli kompletan niz klasa. Zalijepite ga izravno u className vaše komponente, class atribut ili predložak. Klase odmah funkcioniraju s standardnim Tailwind postavljanjem.