Tailwind Helper pregledava bilo koji element na web stranici i generira sveobuhvatan, kategoriziran pregled odgovarajućih Tailwind CSS utility klasa. Za razliku od jednostavnog niza klasa, organizira rezultate po kategorijama — Layout, Spacing, Typography, Colors, Borders i Effects — tako da točno razumijete što svaka klasa kontrolira.
Dok vam Copy as Tailwind daje brzi niz klasa za lijepljenje, Tailwind Helper je alat za dubinsku analizu. Namijenjen je programerima koji žele razumjeti cjelokupan stilski sastav elementa u Tailwind terminima. Svako izračunato CSS svojstvo mapira se na svoju Tailwind alternativu i grupira u logičke kategorije. Na prvi pogled možete vidjeti da element koristi flex layout s items-center poravnanjem, ima p-5 padding s gap-3 između djece, koristi text-lg font-bold za tipografiju i ima bg-slate-900 rounded-lg border border-slate-700 izgled. Kliknite bilo koji pojedinačni tag klase da kopirate samo taj, ili koristite "Kopiraj sve" da preuzmete cijeli niz. Kategorizirani prikaz olakšava odabir točno onih klasa koje trebate umjesto kopiranja svega.
Tailwind klase organizirane su u jasne kategorije: Layout (flex, grid, position), Spacing (padding, margin, gap), Typography (veličina fonta, debljina, boja), Colors (pozadina, tekst, border), Borders (zaobljenje, širina, stil) i Effects (sjena, opacity, transform). Svaka kategorija može se skupiti i jasno je označena.
Kliknite na bilo koji element — buttons, kartice, naslove, inputs, kontejnere — i ploča se odmah popunjava s cjelokupnim pregledom Tailwind klasa. Element je istaknut ljubičastim obrubom tako da točno znate što se pregledava.
Svaka Tailwind klasa prikazana je kao tag koji se može kliknuti. Kliknite bilo koji pojedinačni tag (kao p-5 ili font-bold) da kopirate samo tu klasu u međuspremnik. Suptilna animacija "kopirano" potvrđuje radnju. Savršeno kada trebate samo jednu ili dvije specifične klase.
Gumb "Kopiraj Sve Klase" na dnu generira čist, razmakom odvojen niz svih Tailwind klasa i kopira ga u međuspremnik. Spreman za lijepljenje direktno u className="..." ili class="...".
Svaka vrijednost mapirana je na Tailwind-ovu zadanu spacing i sizing skalu. Font od 16px mapira se na text-base, padding od 24px mapira se na p-6, a #7c3aed mapira se na purple-600. Kada točno podudaranje ne postoji, odabire se najbliža vrijednost skale i bilježi.
Zadržite pokazivač miša iznad bilo kojeg Tailwind tag-a klase u ploči da vidite originalnu izračunatu CSS vrijednost iz koje je generiran. Na primjer, zadržavanjem iznad "p-5" prikazuje se "padding: 20px". Ovaj dvosmjerni prikaz pomaže vam naučiti Tailwind skalu povezivanjem klasa s pravim CSS vrijednostima.
Tailwind Pomočnik 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:*Za razliku od ravnog niza klasa, kategoriziran prikaz omogućuje vam razumijevanje cjelokupnog sastava elementa. Vidite da kartica koristi flex layout, specifičan padding, podebljanu tipografiju, slate pozadinu, zaobljene obrube i suptilnu sjenu — svaki aspekt u vlastitoj sekciji.
Pregledajte dobro dizajnirani element na bilo kojoj web stranici, zatim ga recreirajte u svom Tailwind projektu kopiranjem relevantnih klasa po kategorijama. Preuzmite layout s jednog elementa, tipografiju s drugog i boje iz vaše brand palete — miješajte i usklađujte.
Zadržite pokazivač miša iznad tagova klasa da vidite izvorne CSS vrijednosti. Ovo interaktivno mapiranje najbrži je način za naučiti da p-4 znači 16px, text-lg znači 18px ili da je purple-600 #7c3aed. Pretvorite bilo koju web stranicu u Tailwind vježbu učenja.
Pregledajte elemente na vlastitoj Tailwind stranici kako biste provjerili koriste li dosljedan spacing, boje i tipografiju iz dizajnerskog sustava. Uočite slučajne pojedinačne vrijednosti (poput p-[13px]) koje bi trebale biti standardne vrijednosti skale (p-3 ili p-3.5).
Koristite Copy as Tailwind kada trebate brzi niz klasa za lijepljenje. Koristite Tailwind Helper kada želite proučiti pregled, selektivno kopirati pojedinačne klase ili razumjeti zašto su specifične Tailwind klase odabrane za svako CSS svojstvo.
Otvorite plutajući dock DevSuite Pro i kliknite ikonu Tailwind Helper. Alat se aktivira i ploča se pojavljuje na desnoj strani, spremna za prikaz pregleda klasa.
Kliknite bilo koji element na stranici. Istaknut je ljubičastim obrubom, a ploča se popunjava kategoriziranim Tailwind klasama. Svaka kategorija (Layout, Spacing, Typography, Colors, Borders, Effects) prikazana je kao sekcija s tagovima klasa.
Pregledajte kategorije da razumijete cjelokupan stilski sastav elementa. Svaka klasa je tag koji se može kliknuti — zadržite za prikaz izvorne CSS vrijednosti, kliknite za kopiranje te pojedinačne klase.
Kliknite pojedinačne tagove za kopiranje specifičnih klasa, ili koristite gumb "Kopiraj Sve Klase" na dnu da preuzmete sve kao jedan niz. Zalijepite direktno u svoju Tailwind komponentu.
Kliknite drugi element na stranici da odmah ažurirate ploču s novim klasama. Nije potrebno deaktivirati i ponovo aktivirati — samo nastavljajte klikati za pregled više elemenata zaredom.
Instalirajte DevSuite Pro besplatno i otključajte 39+ razvojnih alata za svoj preglednik.