Kopioi Tailwindina silloittaa visuaalisen suunnittelun ja Tailwind CSS -koodin välisen kuilun. Napsauta mitä tahansa verkkosivun elementtiä ja saat välittömästi vastaavat Tailwind-apuluokat generoituna sen lasketuista CSS-tyyleistä — valmiina liitettäväksi JSX-, Vue-template- tai HTML-tiedostoosi.
Tailwind CSS:llä rakentaminen tarkoittaa ajattelemista apuluokkien kautta eikä mukautetun CSS:n kirjoittamista. Mutta kun viittaat olemassa olevaan suunnitteluun — olipa kyse kilpailijan laskeutumissivusta, vanilla CSS:llä rakennetusta suunnittelujärjestelmästä tai asiakkaan nykyisestä verkkosivustosta — visuaalisten tyylien manuaalinen kääntäminen Tailwind-luokiksi on työlästä ja virhealtista. Kopioi Tailwindina automatisoi tämän kokonaan. Se lukee minkä tahansa elementin lasketut tyylit ja kartoittaa jokaisen ominaisuuden lähimpään Tailwind-apuluokkaan oletusasteikon avulla. Värit sovitetaan lähimpään Tailwind-paletin väriin, välistysarvot napsahtavat lähimpään rem-pohjaiseen apuohjelmaan ja typografia kartoittuu text-*- ja font-*-luokkiin. Tulostus on siisti, yksirivisinen luokkastring, jonka voit liittää suoraan komponenttiisi.
bg-purple-600 text-white
px-7 py-3 rounded-lg
font-semibold text-base
border-2 border-purple-400
Napsauta mitä tahansa elementtiä ja sen täydellinen laskettu CSS analysoidaan reaaliajassa. Jokainen sovellettava ominaisuus kartoitetaan vastaavaan Tailwind-apuluokkaan — bg-purple-600:sta rounded-lg:hen font-semiboldiin. Muunnos tapahtuu välittömästi ilman lataus- tai prosessointiviivettä.
Työkalu ei vain tee merkkijononkorvauksia — se ymmärtää Tailwindin suunnittelujärjestelmän. 12 px:n täyte kartoittuu p-3:een (ei mukautettuun arvoon), värit sovitetaan lähimpään Tailwind-paletin sävyyn (esim. #7c3aed muuttuu purple-600:ksi) ja fonttikoot kartoittuvat text-sm-, text-base-, text-lg-luokkiin jne.
Generoitu luokkastring näytetään siistissä tulostuspaneelissa. Napsauta Kopioi-painiketta kerran ja koko string on leikepöydälläsi — valmiina liitettäväksi className="..."iin Reactissa, class="..."iin HTML:ssä tai :class="..."iin Vuessa.
Entistä nopeampaa työnkulkua varten napsauta hiiren oikealla mitä tahansa sivun elementtiä päästäksesi "Kopioi Tailwindina" -toimintoon suoraan selaimen kontekstivalikosta. Ei tarvetta avata DevSuite-telakkaa — napsauta vain oikealla, klikkaa ja luokat ovat leikepöydälläsi.
Menee yksinkertaisia kartoituksia pidemmälle. Käsittelee box-shadowit (shadow-md, shadow-lg), gradientit, reunatyylit, flex/grid-layoutluokat, opasiteettiarvot ja jopa responsiivisuustietoiset ominaisuudet kuten max-width ja kuvasuhteet.
Sisältää vain selainten oletuksista poikkeavat luokat — ei tarpeettomia apuohjelmia. Tulostus on tiivis ja tuotantovalmis, eikä se ole täynnä luokkia perityille tai oletusarvoille.
Kopioi Tailwindina 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-*)transitioncursorRakennatko verkkosivustoa uudelleen vanilla CSS:stä tai Bootstrapista Tailwindiin? Napsauta jokaista suurta komponenttia olemassa olevalla sivustolla, kopioi Tailwind-luokat ja käytä niitä lähtökohtana uusille Tailwind-komponenteillesi. Säästää tunteja manuaalisesta ominaisuus-luokka-käännöstyöstä.
Löysitkö kauniisti suunnitellun kortin, hero-osion tai navigoinnin toisella verkkosivustolla? Napsauta sitä, hae Tailwind-luokat ja käytä niitä viitepohjana oman versiosi rakentamiseen. Ei tarvetta tarkastaa manuaalisesti kymmeniä CSS-ominaisuuksia.
Kun rakennat uusia Tailwind-komponentteja Figma- tai PSD-mallikuvasta, toteuta suunnitelma selaimessa ensin DevToolsia käyttäen, sitten napsauta elementtiä Kopioi Tailwindina -toiminnolla saadaksesi tarkat apuluokat sen sijaan, että kirjoittaisit ne käsin.
Varmista, että käsin kirjoittamasi CSS-arvot kartoittuvat oikeasti kelvollisiin Tailwind-asteikkoarvoihin. Jos kirjoitit padding: 14px, työkalu näyttää, pyöristyykö se p-3:een (12 px) vai p-3,5:een (14 px) — havaitsee epäjohdonmukaisuudet ennen kuin ne päätyvät tuotantoon.
Oletko uusi Tailwindissa? Napsauta elementtejä millä tahansa verkkosivulla nähdäksesi, miten perinteiset CSS-ominaisuudet käännetään apuluokiksi. Se on interaktiivinen tapa oppia Tailwind-luokkien nimeämisjärjestelmä näkemällä todellisia esimerkkejä.
Avaa DevSuite Pron kelluva telakka ja napsauta Kopioi Tailwindina -kuvaketta. Työkalu aktivoituu ja kohdistimesi muuttuu tähtäinvalitsimeksi, mikä osoittaa, että voit nyt napsauttaa elementtejä.
Napsauta mitä tahansa sivun elementtiä — painiketta, korttia, otsikkoa, navigointipalkkia. Elementti korostuu ja sen laskettu CSS analysoidaan. Kelluva paneeli ilmestyy näyttäen generoidun Tailwind-luokkastringing.
Paneeli näyttää täydellisen Tailwind-luokkastringing jaettuna loogisiin ryhmiin. Näet tarkalleen, mikä CSS-ominaisuus kartoittui mihinkin Tailwind-luokkaan. Vie hiiri minkä tahansa luokan päälle nähdäksesi taustalla olevan CSS-arvon, jota se edustaa.
Napsauta "Kopioi"-painiketta nappaamaksesi koko luokkastringing. Liitä se suoraan komponenttisi classNameen, class-attribuuttiin tai templateen. Luokat toimivat välittömästi tavallisella Tailwind-asetuksella.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.