Maendlelo Lamanene ya Tailwind - Nkongomiso wo Hetelela wa Tailwind CSS

Loko swita eka ku tirhisa utility-first CSS, Tailwind CSS yi hundzuke xitshunxo xo ya eka xona eka vaendli votala.

Ku cinca-cinca, vuhumelerisi, na ku olova ka ku tirhisiwa loku yi ku nyikaka swi tikombise swi ri swa nkoka swinene eka nhluvukiso wa webu wa manguva lawa.

Kambe, ku fana na xitirhisiwa xin’wana na xin’wana, ku kuma swo tala eka xona, i swa nkoka ku twisisa na ku tirhisa maendlelo lamanene ya Tailwind CSS.

A hi ngheneni eka yin’wana ya tindlela leti.

1. Swisekelo swo Sungula swa Vutirhisi

Filosofi ya vukorhokeri-ku sungula i nsinya wa nkoka wa Tailwind CSS, leyi kongomisaka ku nyika matimba eka vatumbuluxi hi titlilasi ta vukorhokeri bya xiyimo xa le hansi ematshan’wini ya swiphemu leswi endliweke ka ha ri emahlweni. Endlelo leri ekusunguleni ri nga vonaka ri chavisa hikwalaho ka ku vulavula ka HTML ya wena; hambiswiritano, loko se yi twisisiwile, yi endla leswaku ku endliwa prototyping hi xihatla na ku cinca ka xiyimo xa vuhumelerisi.

Eka architecture ya utility-first, tlilasi yin’wana na yin’wana yi fambelana na xihlawulekisi xa xitayili xo karhi. Xikombiso, tlilasi ya text-center yi ta ringanisa tsalwa ra wena na le xikarhi, kasi bg-blue-500 yi ta nyika elemente ya wena ndzhuti wo karhi wa blue background.

Endlelo leri ri tlakusa ku tirhisiwa nakambe ka swiphemu naswona ri hunguta nhlayo ya CSS leyi u yi tsalaka, ku herisa timhaka leti tolovelekeke to fana na tinyimpi ta ku kongoma na ku herisiwa ka khodi leyi feke.

2. Dizayini leyi Hlamulaka

Tailwind CSS yi tlhela yi humelela eka dizayini leyi hlamulaka. Yi tirhisa mobile-first breakpoint system, leswivulaka leswaku switayele leswi tirhisiwaka eka swikirini leswintsongo swinga cascade hiku olova kuya eka leswikulu. Leswi swi nga endliwa hi ku tirhisa swirhangi swo olova swo fana na sm:, md:, lg:, na xl: emahlweni ka titlilasi ta wena ta vukorhokeri.

Xikombiso, md:text-center yi ta tirhisa ntsena tlilasi ya text-center eka swikirini swa le xikarhi na leswikulu. Leswi swi pfumelela ku dizayina hi ndlela yo twisiseka eka vukulu byo hambana bya xikirini, leswi endlaka leswaku dizayini leyi hlamulaka yi olova hi Tailwind.

3. Ku Tirhisa Switayili Hi Vuntshwa

Hambileswi utility-first yi khutazaka ku tirhisa switayele hi ku kongoma eka HTML ya wena, ku phindha-phindha ku hlanganisiwa loku rharhanganeke ka switirhisiwa swi nga ha tika. Laha, Tailwind’s @apply directive yi hundzuka muponisi wa vutomi, yi ku pfumelela ku humesa switayele leswi phindha-phindhiweke eka titlilasi ta CSS ta ntolovelo.

Xikombiso, loko u tshamela ku tirhisa nkatsakanyo wa bg-red-500 text-white p-6, u nga tumbuluxa tlilasi leyintshwa yo fana na .error ivi u tirhisa @apply ku tirhisa switayele leswi nakambe. Leswi swi ndlandlamuxa ku hlayeka ka khodi na ku hlayisiwa.

4. Ku engetela Switayili swa Xihlawuhlawu

Hambi leswi Tailwind CSS yi taka na nxaxamelo wo anama wa titlilasi ta vukorhokeri, u nga ha lava switayele swa ntolovelo eka swilaveko swo karhi. Tailwind yi nyika swihlawulekisi swo anama swa ku cinca-cinca hi ku tirhisa fayili ya yona ya vuhlanganisi, tailwind.config.js.

U nga engetela vukorhokeri bya ntolovelo, u tumbuluxa mihlovo ya ntolovelo, tindhawu to wisa, tifonto, na swin’wana. I swa nkoka, hambiswiritano, ku tirhisa xitirhisiwa lexi hi xiwelo ku sivela ku pfimba ka fayili ya wena ya vuhlanganisi.

5. Mintirho & Swiletelo

Tailwind CSS yi nyika mintirho yo hlayanyana na swiletelo ku endla leswaku ntokoto wa wena wa nhluvukiso wu olova. Xikombiso, ntirho wa theme() wu ku pfumelela ku fikelela mimpimo ya wena ya vukorhokeri hi ku kongoma eka CSS ya wena, ku olovisa xitayili lexi cinca-cincaka.

Ku tlula kwalaho, swiletelo swa Tailwind’s, ku fana na @responsive, @variants, na @apply, swi ku pfumelela ku tumbuluxa swihlawulekisi leswi hlamulaka, swa xiyimo, na ku humesa switayele leswi phindha-phindhiweke, hi ku landzelelana. Ku tirhisa mintirho leyi na swiletelo hi ndlela leyi faneleke swi ta hatlisisa endlelo ra wena ra nhluvukiso na ku hlayisa khodi ya wena yi hlelekile.

6. Ku Khoma Hover, Focus, na Swiyimo Swin’wana

Ndhawu yin’wana leyi Tailwind CSS yi voningaka eka yona i ku khoma swiyimo swo hambana swa swiaki. Ku tirhisa switayele eka swiyimo swa hover, focus, active, na swin’wana swa olova ku fana na ku sungula tlilasi ya vukorhokeri hi vito ra xiyimo.

Xikombiso, hover:bg-blue-500 yi ta tirhisa tlilasi ya bg-blue-500 loko elemente yi hovered ehenhla. Swirhangi leswi swi nyika xiyimo xa le henhla xa vulawuri eka ndlela leyi swiaki swi tikhomaka ha yona eka swiyimo swo hambana, ku ndlandlamuxa ntokoto wa mutirhisi wa sayiti ya wena.

Hi ku gimeta, ku tiva maendlelo lawa ya kahle ya Tailwind CSS swi nga ndlandlamuxa swinene endlelo ra wena ra nhluvukiso wa webu. Endlelo ro rhanga hi ku pfuna, loko ri hlanganisiwa na ku tirhisiwa nakambe loku humelelaka ka switayele, ku cinca hi ku landza swilaveko swa wena, na ku tirhisa mavoko lamanene

Nantswisa maendlelo ya wena ya ntirho wa Tailwind CSS hi DivMagic

Loko u lava ku antswisa maendlelo ya wena ya ntirho ya Tailwind CSS, languta DivMagic, ku engeteriwa ka browser leyi ku pfumelelaka ku kopa no hundzuluxa titlilasi ta Tailwind CSS hi ku kongoma ku suka eka browser ya wena naswona yi tirha eka webusayiti yihi na yihi.

Chrome:Ku nghenisa eka Chrome

Firefox:Ku nghenisa eka Firefox

U kume mbuyelo kumbe mhaka? Hi tivise hi ku tirhisa pulatifomo ya hina, naswona hi ta swi khoma leswi seleke!