IiNgcebiso eziGqwesileyo zaseTailwind-Isikhokelo esigqibeleleyo seTailwind CSS

Xa kuziwa ekuphumezeni i-utility-first CSS, i-Tailwind CSS iye yaba sisisombululo kubaphuhlisi abaninzi.

Ukuguquguquka, imveliso, kunye nokusebenziseka ngokulula ekunikezeni kungqineke kuxabiseke kakhulu kuphuhliso lwewebhu lwangoku.

Nangona kunjalo, njengaso nasiphi na isixhobo, ukufumana okuninzi kuyo, kubalulekile ukuqonda nokusebenzisa ezona ndlela zibalaseleyo zeTailwind CSS.

Makhe singene kwezinye zezi ndlela.

1. Izinto eziluncedo-zokuqala

I-filosofi eluncedo-yokuqala ngumgaqo ongundoqo we-Tailwind CSS, ojolise ekuxhobiseni abaphuhlisi ngeeklasi eziluncedo ezikumgangatho ophantsi endaweni yamacandelo asele eyilwe. Le ndlela inokubonakala inzima ekuqaleni ngenxa ye-verbosity yeHTML yakho; nangona kunjalo, xa iqondwa, yenza ukuba iprototyping ekhawulezileyo kunye nenqanaba lemveliso lilungele ukwenziwa.

Kwi-architecture ye-utility-first, iklasi nganye ihambelana nophawu oluthile lwesitayela. Umzekelo, iklasi ye-text-center iya kulungelelanisa isicatshulwa sakho embindini, ngelixa i-bg-blue-500 iya kunika into yakho umthunzi othile wemvelaphi eluhlaza.

Le ndlela ikhuthaza ukusetyenziswa kwakhona kwecandelo kunye nokunciphisa inani le-CSS oyibhalayo, ukuphelisa imiba eqhelekileyo njengeemfazwe ezithile kunye nokupheliswa kwekhowudi efile.

2. Uyilo oluphendulayo

I-Tailwind CSS ikwagqwesa kuyilo oluphendulayo. Isebenzisa inkqubo ye-mobile-first breakpoint, okuthetha ukuba izitayile ezisetyenziswa kwizikrini ezincinci zinokuhla ngokulula ukuya kwezinkulu. Oku kunokwenziwa kusetyenziswa izimaphambili ezilula njenge sm:, md:, lg:, kunye ne xl: phambi kweeklasi zakho eziluncedo.

Umzekelo, md:text-center iya kusebenzisa kuphela text-center class kwizikrini eziphakathi nezikhudlwana. Oku kukuvumela ukuba uyile intuitively kwiisayizi ezahlukeneyo zesikrini, wenze uyilo oluphendulayo lube yimpepho ene-Tailwind.

3. Ukusebenzisa kwakhona Izimbo

Ngelixa usetyenziso-kuqala lukhuthaza ukusebenzisa izitayile ngokuthe ngqo kwi-HTML yakho, ukuphinda indibaniselwano entsonkothileyo yezinto eziluncedo kunokuba nzima. Apha, uTailwind's @apply myalelo uba sisisindisi sobomi, ikuvumela ukuba ukhuphe izitayile eziphindaphindiweyo kwiiklasi zeCSS zesiko.

Umzekelo, ukuba usebenzisa rhoqo indibaniselwano ye-bg-red-500 text-white p-6, ungenza udidi olutsha olunje .error kwaye usebenzise @apply ukuphinda usebenzise ezi zimbo. Oku kwandisa ukufundeka kwekhowudi kunye nokugcinwa.

4. Ukongeza izimbo zesiNtu

Nangona i-Tailwind CSS iza noluhlu olubanzi lweeklasi eziluncedo, unokufuna izimbo zesiko kwiimfuno ezithile. I-Tailwind inikezela ngeendlela ezininzi zokulungisa ngokusetyenziswa kwefayile yayo yoqwalaselo, tailwind.config.js.

Unokwandisa uqwalaselo olungagqibekanga, wenze imibala yesiko, iindawo zokuphumla, iifonti, nokunye. Kubalulekile, nangona kunjalo, ukusebenzisa eli nqaku kancinci ukunqanda ukudumba kwefayile yakho yoqwalaselo.

5. Imisebenzi kunye nezikhokelo

I-Tailwind CSS ibonelela ngemisebenzi emininzi kunye nezikhokelo ukwenza amava akho ophuhliso alula. Umzekelo, umxholo () umsebenzi ukuvumela ukuba ufikelele kumaxabiso akho oqwalaselo ngokuthe ngqo kwiCSS yakho, iququzelela isimbo esiguqukayo.

Ngaphezu koko, imiyalelo ye-Tailwind, njenge-@responsive, @variants, kunye ne-@apply, ikuvumela ukuba uvelise ukusabela, ukwahluka kombuso, kunye nokukhupha izitayile eziphindaphindiweyo, ngokulandelanayo. Ukusebenzisa le misebenzi kunye nezikhokelo ngokufanelekileyo kuya kukhawulezisa inkqubo yakho yophuhliso kwaye ugcine i-codebase yakho icwangcisiwe.

6. Ukuphatha iHover, Focus, kunye namanye aMazwe

Enye indawo apho i-Tailwind CSS ikhanya khona iphatha izinto ezahlukeneyo. Ukusebenzisa izimbo kwi-hover, ugqaliselo, iyasebenza, kunye namanye amazwe kulula njengokumisela udidi oluluncedo ngegama likarhulumente.

Umzekelo, ihover:bg-blue-500 iya kusebenzisa iklasi ye-bg-blue-500 xa i element ihoverwe ngaphezulu. Ezi zimaphambili zibonelela ngenqanaba eliphezulu lolawulo malunga nendlela izinto eziziphatha ngayo kumazwe ahlukeneyo, ziphucula amava omsebenzisi kwindawo yakho.

Ukuqukumbela, ukuqonda ezi ndlela zibalaseleyo ze-Tailwind CSS kunokuphucula kakhulu inkqubo yakho yophuhliso lwewebhu. Indlela eluncedo-yokuqala, xa idityaniswe nokusetyenziswa okusebenzayo kwezitayile, ukwenziwa ngokwezifiso, kunye nesandla esilungileyo

Phucula ukuhamba kwakho kweTailwind CSS ngeDivMagic

Ukuba ujonge ukuphucula ukuhamba kwakho kwe-Tailwind CSS, jonga i-DivMagic, isandiso sebrawuza ekuvumela ukuba ukope kwaye uguqule iiklasi ze-Tailwind CSS ngqo kwisikhangeli sakho kwaye isebenza kuyo nayiphi na iwebhusayithi.

Chrome:Fakela iChrome

Firefox:Fakela iFirefox

Unengxelo okanye umba? Sazise ngeqonga lethu, kwaye siza kujongana nokunye!