Tailwind Helper tarkastaa minkä tahansa verkkosivun elementin ja generoi kattavan, kategorisoidun erittelyn vastaavista Tailwind CSS -apuluokista. Toisin kuin yksinkertainen luokkastring, se järjestää tulokset kategorian mukaan — Layout, Välistys, Typografia, Värit, Reunat ja Efektit — joten ymmärrät tarkalleen, mitä jokainen luokka hallitsee.
Kopioi Tailwindina antaa sinulle nopean liitettävän luokkastringing, Tailwind Helper on syväsukelluskumppani. Se on rakennettu kehittäjille, jotka haluavat ymmärtää elementin täydellisen tyylirakenteen Tailwind-termein. Jokainen laskettu CSS-ominaisuus kartoitetaan Tailwind-vastineeseensa ja ryhmitellään loogisiin kategorioihin. Näet yhdellä silmäyksellä, että elementti käyttää flex-layoutia items-center-kohdistuksella, siinä on p-5-täyte ja gap-3 lasten välillä, se käyttää text-lg font-bold -typografiaa ja siinä on bg-slate-900 rounded-lg border border-slate-700 -ulkoasu. Napsauta mitä tahansa yksittäistä luokkataggia kopioidaksesi vain sen tai käytä "Kopioi kaikki" -toimintoa nappaamaan koko string. Kategorisoitu näkymä helpottaa tarvitsemiesi luokkien poimimista kaiken kopioimisen sijaan.
Tailwind-luokat järjestetään selkeisiin kategorioihin: Layout (flex, grid, position), Välistys (padding, margin, gap), Typografia (fonttikoko, paino, väri), Värit (tausta, teksti, reuna), Reunat (säde, leveys, tyyli) ja Efektit (shadow, opacity, transform). Jokainen kategoria on supistettavissa ja selkeästi merkitty.
Napsauta mitä tahansa elementtiä — painikkeita, kortteja, otsikoita, syöttökenttiä, säiliöitä — ja paneeli täyttyy välittömästi täydellisellä Tailwind-luokkaerittelyllä. Elementti korostuu violetilla reunuksella, jotta tiedät tarkalleen, mitä tarkastetaan.
Jokainen Tailwind-luokka näytetään napsautettavana taginä. Napsauta mitä tahansa yksittäistä tagia (kuten p-5 tai font-bold) kopioidaksesi juuri sen luokan leikepöydällesi. Hienovarainen "kopioitu"-animaatio vahvistaa toiminnon. Täydellinen kun tarvitset vain yhden tai kaksi tiettyä luokkaa.
"Kopioi kaikki luokat" -painike alhaalla generoi siistin, välilyönnillä erotetun stringing kaikista Tailwind-luokista ja kopioi sen leikepöydällesi. Valmis liitettäväksi suoraan className="..."iin tai class="..."iin.
Jokainen arvo kartoitetaan Tailwindin oletusvälistys- ja kokoskaalalle. 16 px:n fontti kartoittuu text-baseen, 24 px:n täyte kartoittuu p-6:een ja #7c3aed kartoittuu purple-600:ksi. Kun täsmällistä vastaavuutta ei ole, läheisin skaala-arvo valitaan ja merkitään.
Vie hiiri minkä tahansa Tailwind-luokkataggin päälle paneelissa nähdäksesi alkuperäisen lasketun CSS-arvon, josta se on generoitu. Esimerkiksi "p-5":n päälle vieminen näyttää "padding: 20px". Tämä kaksisuuntainen näkymä auttaa oppimaan Tailwind-asteikon yhdistämällä luokat todellisiin CSS-arvoihin.
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:*Toisin kuin tasainen luokkastring, kategorisoitu näkymä antaa sinun ymmärtää elementin täydellisen rakenteen. Näe, että kortti käyttää flex-layoutia, tiettyä täytettä, lihavaa typografiaa, slate-taustaa, pyöristettyjä reunoja ja hienovaraista varjoa — jokainen aspekti omassa osiossaan.
Tarkasta hyvin suunniteltu elementti millä tahansa verkkosivustolla, luo se sitten uudelleen Tailwind-projektissasi kopioimalla relevantit kategorialuokat. Ota layout yhdestä elementistä, typografia toisesta ja värit brändpalettistasi — sekoita ja sovita.
Vie hiiri luokkatagien päälle nähdäksesi CSS-lähdearvot. Tämä interaktiivinen kartoitus on nopein tapa oppia, että p-4 tarkoittaa 16 px, text-lg tarkoittaa 18 px tai että purple-600 on #7c3aed. Muuta mikä tahansa verkkosivusto Tailwind-oppimisharjoitukseksi.
Tarkasta elementtejä omalla Tailwind-rakennetulla sivustollasi varmistaaksesi, että ne käyttävät johdonmukaista välistystä, värejä ja typografiaa suunnittelujärjestelmästä. Havaitse satunnaiset yksittäisarvot (kuten p-[13px]), joiden tulisi olla standardiasteikkoarvoja (p-3 tai p-3,5).
Käytä Kopioi Tailwindina -toimintoa kun tarvitset nopean liitettävän luokkastringing. Käytä Tailwind Helperia kun haluat tutkia erittelyä, kopioida yksittäisiä luokkia valikoivasti tai ymmärtää, miksi tiettyjä Tailwind-luokkia valittiin kullekin CSS-ominaisuudelle.
Avaa DevSuite Pron kelluva telakka ja napsauta Tailwind Helper -kuvaketta. Työkalu aktivoituu ja paneeli ilmestyy oikealle puolelle, valmiina näyttämään luokkaerittelyn.
Napsauta mitä tahansa sivun elementtiä. Se korostuu violetilla reunuksella ja paneeli täyttyy kategorisoiduilla Tailwind-luokilla. Jokainen kategoria (Layout, Välistys, Typografia, Värit, Reunat, Efektit) näytetään osiona, jossa on luokkatageja.
Selaa kategorioita ymmärtääksesi elementin täydellisen tyylirakenteen. Jokainen luokka on napsautettava tagi — vie hiiri nähdäksesi lähde-CSS-arvo, napsauta kopioidaksesi kyseisen yksittäisen luokan.
Napsauta yksittäisiä tageja kopioidaksesi tiettyjä luokkia tai käytä "Kopioi kaikki luokat" -painiketta alhaalla nappaamaan kaikki yhtenä stringinä. Liitä suoraan Tailwind-komponenttiisi.
Napsauta eri elementtiä sivulla päivittääksesi paneelin välittömästi uusilla luokilla. Ei tarvetta deaktivoida ja uudelleenaktivoida — jatka napsauttamista tarkastaaksesi useita elementtejä peräkkäin.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.