Kopeeri kui Tailwind ületab lõhe visuaalse disaini ja Tailwind CSS koodi vahel. Klõpsa veebilehel mis tahes elemendil ja saa koheselt vastavad Tailwind utiliidiklassid, mis on genereeritud arvutatud CSS stiilidest — valmis kleepimiseks JSX-i, Vue malli või HTML faili.
Tailwind CSS-iga ehitamine tähendab utiliidiklassides mõtlemist kohandatud CSS-i kirjutamise asemel. Aga kui sa viitad olemasolevale disainile — olgu see konkurendi landing leht, vanilla CSS-il ehitatud disainisüsteem või kliendi praegune veebileht — visuaalsete stiilide käsitsi tõlkimine Tailwind klassideks on tüütu ja vigadele kalduv. Kopeeri kui Tailwind automatiseerib selle täielikult. See loeb brauseri arvutatud stiile mis tahes elemendi jaoks ja kaardistab iga omaduse lähimale Tailwind utiliidiklassile, kasutades vaikimisi skaalat. Värvid sobitatakse lähima Tailwind paleti värviga, vahede väärtused haakuvad lähima rem-põhise utiliidiga ning tüpograafia kaardistub text-* ja font-* klassideks. Väljund on puhas, üherealine klassistring, mille saad otse oma komponenti kleepida.
bg-purple-600 text-white
px-7 py-3 rounded-lg
font-semibold text-base
border-2 border-purple-400
Klõpsa mis tahes elemendil ja selle täielik arvutatud CSS analüüsitakse reaalajas. Iga rakendatav omadus kaardistatakse vastava Tailwind utiliidiklassiga — alates bg-purple-600 kuni rounded-lg ja font-semibold. Teisendamine toimub koheselt ilma laadimise või töötlemise viivituseta.
Tööriist ei tee lihtsalt stringi asendamist — see mõistab Tailwindi disainisüsteemi. 12px padding kaardistub p-3 (mitte kohandatud väärtuseks), värvid sobitatakse lähimale toonile Tailwindi paletis (nt #7c3aed muutub purple-600) ja fondi suurused kaardistuvad text-sm, text-base, text-lg jne.
Genereeritud klassistring kuvatakse puhtas väljundpaneelis. Klõpsa Kopeeri nuppu üks kord ja kogu string on sinu lõikepuhvris — valmis kleepimiseks className="..." sisse Reactis, class="..." sisse HTMLis või :class="..." sisse Vues.
Veelgi kiirema töövoo jaoks paremklõpsa lehel mis tahes elemendil, et pääseda "Kopeeri kui Tailwind" juurde otse brauseri kontekstimenüüst. Pole vaja avada DevSuite dokki — lihtsalt paremklõps, klõps ja klassid on sinu lõikepuhvris.
Läheb kaugemale lihtsast kaardistamisest. Käsitleb box shadow'sid (shadow-md, shadow-lg), gradiente, äärise stiile, flex/grid paigutuse klasse, läbipaistvuse väärtusi ja isegi responsive omadusi nagu max-width ja aspect ratiod.
Sisaldab ainult klasse, mis erinevad brauseri vaikeväärtustest — pole üleliigseid utiliite. Väljund on lakooniline ja toodanguks valmis, mitte täis päritud või vaikeväärtuste klasse.
Kopeeri kui Tailwind 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-*)transitioncursorEhitad veebilehte vanilla CSS-st või Bootstrapist Tailwindi ümber? Klõpsa igal olemasoleval suuremal komponendil, kopeeri Tailwind klassid ja kasuta neid oma uute Tailwind komponentide lähtepunktina. Säästab tunde käsitsi omadusest klassi tõlkimisest.
Leidsid kauni disainiga kaardi, hero sektsiooni või navigatsiooni teisel veebilehel? Klõpsa sellel, saa Tailwind klassid ja kasuta neid oma versiooni ehitamiseks viitena. Pole vaja käsitsi inspekteerida tosinaid CSS omadusi.
Uute Tailwind komponentide ehitamisel Figma või PSD makettidest implementeeri disain esmalt brauseris DevTools-i kasutades, seejärel klõpsa elemendil Kopeeri kui Tailwindiga, et saada täpsed utiliidiklassid nende käsitsi kirjutamise asemel.
Veendu, et sinu käsitsi kirjutatud CSS väärtused tegelikult kaardistuvad kehtivatele Tailwind skaala väärtustele. Kui kirjutasid padding: 14px, näitab tööriist, kas see ümardub p-3 (12px) või p-3.5 (14px) peale — püüdes ebakõlasid enne nende avaldamist.
Tailwind on uus? Klõpsa mis tahes veebilehe elementidel, et näha, kuidas traditsioonilised CSS omadused tõlkuvad utiliidiklassideks. See on interaktiivne viis Tailwindi klassinimetuste süsteemi õppida päris näiteid nähes.
Ava DevSuite Pro hõljuv dokk ja klõpsa Kopeeri kui Tailwind ikoonil. Tööriist aktiveerub ja sinu kursor muutub sihiku valijaks, mis näitab, et saad nüüd elementidel klõpsata.
Klõpsa mis tahes elemendil lehel — nuppu, kaardil, pealkirjal, navigeerimisribal. Element tõstetakse esile ja selle arvutatud CSS analüüsitakse. Ilmub hõljuv paneel, mis näitab genereeritud Tailwind klassistringi.
Paneel näitab täielikku Tailwind klassistringi loogilistes rühmades. Näed täpselt, milline CSS omadus kaardistus millise Tailwind klassiga. Hõljuta mis tahes klassil, et näha aluseks olevat CSS väärtust.
Klõpsa "Kopeeri" nuppu, et haarata terve klassistring. Kleebi see otse oma komponendi className-i, class atribuuti või malli. Klassid töötavad koheselt standardse Tailwind seadistusega.
Paigaldage DevSuite Pro tasuta ja avage 39+ arendustööriista oma brauserile.