Tailwind Abimees inspekteerib mis tahes elementi veebilehel ja genereerib põhjaliku, kategoriseeritud jaotuse vastavatest Tailwind CSS utiliidiklassidest. Erinevalt lihtsast klassistringist organiseerib see tulemused kategooriate kaupa — Paigutus, Vahed, Tüpograafia, Värvid, Äärised ja Efektid — nii et mõistad täpselt, mida iga klass kontrollib.
Kui Kopeeri kui Tailwind annab sulle kiire klassistringi kleepimiseks, siis Tailwind Abimees on süvaanalüüsi kaaslane. See on ehitatud arendajatele, kes tahavad mõista elemendi täielikku stiilikompositsiooni Tailwindi mõistes. Iga arvutatud CSS omadus kaardistatakse Tailwindi vastega ja rühmitatakse loogilistesse kategooriatesse. Näed ühe pilguga, et element kasutab flex paigutust koos items-center joondusega, omab p-5 padding'ut gap-3 vahedega laste vahel, kasutab text-lg font-bold tüpograafiat ja omab bg-slate-900 rounded-lg border border-slate-700 välimust. Klõpsa mis tahes üksikul klassi sildil, et seda kopeerida, või kasuta "Kopeeri Kõik", et haarata terve string. Kategoriseeritud vaade teeb täpsete vajalike klasside valimise lihtsaks, mitte kõike kopeerides.
Tailwind klassid on organiseeritud selgetesse kategooriatesse: Paigutus (flex, grid, position), Vahed (padding, margin, gap), Tüpograafia (fondi suurus, kaal, värv), Värvid (taust, tekst, ääris), Äärised (raadius, laius, stiil) ja Efektid (vari, läbipaistvus, transform). Iga kategooria on kokku volditav ja selgelt märgistatud.
Klõpsa mis tahes elemendil — nuppudel, kaartidel, pealkirjadel, sisenditel, konteineritel — ja paneel täitub koheselt täieliku Tailwind klasside jaotusega. Element tõstetakse esile lilla äärisega, et teaksid täpselt, mida inspekteeritakse.
Iga Tailwind klass kuvatakse klikitava sildina. Klõpsa mis tahes üksikul sildil (nagu p-5 või font-bold), et kopeerida ainult see klass oma lõikepuhvrisse. Peen "kopeeritud" animatsioon kinnitab toimingu. Ideaalne, kui vajad ainult ühte või kahte konkreetset klassi.
"Kopeeri Kõik Klassid" nupp allosas genereerib puhta, tühikutega eraldatud stringi kõikidest Tailwind klassidest ja kopeerib selle sinu lõikepuhvrisse. Valmis kleepimiseks className="..." või class="..." sisse otse.
Iga väärtus kaardistatakse Tailwindi vaikimisi vahede ja suuruste skaalale. 16px font kaardistub text-base, 24px padding kaardistub p-6 ja #7c3aed kaardistub purple-600. Kui täpset vastet ei ole, valitakse lähim skaala väärtus ja seda märgitakse.
Hõljuta paneelis mis tahes Tailwind klassi sildi kohal, et näha algset arvutatud CSS väärtust, millest see genereeriti. Näiteks hõljutades "p-5" üle näitab "padding: 20px". See kahesuunaline vaade aitab sul Tailwind skaalat õppida, ühendades klassid tegelike CSS väärtustega.
Tailwind Abimees 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:*Erinevalt lihtsast klassistringist laseb kategoriseeritud vaade sul mõista elemendi täielikku kompositsiooni. Vaata, et kaart kasutab flex paigutust, konkreetset padding'ut, paksu tüpograafiat, slate tausta, ümaraid ääriseid ja peent varju — iga aspekt oma sektsioonis.
Inspekteeri hästi disainitud elementi mis tahes veebilehel, seejärel taasloo see oma Tailwind projektis, kopeerides asjakohased kategooriate klassid. Võta paigutus ühest elemendist, tüpograafia teisest ja värvid oma brändi paletist — sega ja sobita.
Hõljuta klassi siltide kohal, et näha CSS allika väärtusi. See interaktiivne kaardistamine on kiireim viis õppida, et p-4 tähendab 16px, text-lg tähendab 18px või et purple-600 on #7c3aed. Muuda mis tahes veebileht Tailwindi õppeharjutuseks.
Inspekteeri elemente oma Tailwind-põhisel saidil, et veenduda, et need kasutavad järjepidevaid vahesid, värve ja tüpograafiat disainisüsteemist. Märka juhuslikke ühekordseid väärtusi (nagu p-[13px]), mis peaksid olema standardsed skaala väärtused (p-3 või p-3.5).
Kasuta Kopeeri kui Tailwindi, kui vajad kiiret klassistringi kleepimiseks. Kasuta Tailwind Abimeest, kui tahad uurida jaotust, valikuliselt üksikuid klasse kopeerida või mõista, miks konkreetsed Tailwind klassid valiti iga CSS omaduse jaoks.
Ava DevSuite Pro hõljuv dokk ja klõpsa Tailwind Abimehe ikoonil. Tööriist aktiveerub ja paremal poolel ilmub paneel, mis on valmis klasside jaotusi kuvama.
Klõpsa lehel mis tahes elemendil. See tõstetakse esile lilla äärisega ja paneel täitub kategoriseeritud Tailwind klassidega. Iga kategooria (Paigutus, Vahed, Tüpograafia, Värvid, Äärised, Efektid) kuvatakse sektsioonina koos klassi siltidega.
Sirvi kategooriaid, et mõista elemendi täielikku stiilikompositsiooni. Iga klass on klikitav silt — hõljuta, et näha allika CSS väärtust, klõpsa, et kopeerida see üksik klass.
Klõpsa üksikutel siltidel, et kopeerida konkreetseid klasse, või kasuta "Kopeeri Kõik Klassid" nuppu allosas, et haarata kõik ühe stringina. Kleebi otse oma Tailwind komponenti.
Klõpsa lehel teisel elemendil, et koheselt uuendada paneeli uute klassidega. Pole vaja deaktiveerida ja taasaktiveerida — jätka lihtsalt klõpsamist, et inspekteerida mitut elementi järjest.
Paigaldage DevSuite Pro tasuta ja avage 39+ arendustööriista oma brauserile.