Omume kachasị mma nke Tailwind - Ntuziaka kacha mma maka CSS Tailwind

A bịa na mmejuputa iwu-nke mbụ CSS, Tailwind CSS aghọwo ihe na-aga-na ngwọta maka ọtụtụ ndị mmepe.

Mgbanwe, nrụpụta, na ịdị mfe nke ojiji ọ na-enye egosila na ọ bara uru na mmepe weebụ ọgbara ọhụrụ.

Otú ọ dị, dị ka ngwá ọrụ ọ bụla, iji nweta ihe kachasị na ya, ọ dị oké mkpa ịghọta na itinye usoro kacha mma Tailwind CSS.

Ka anyị banye n'ime ụfọdụ usoro ndị a.

1. Utility-Mbụ ntọala

Nkà ihe ọmụma bara uru-mbụ bụ isi ụkpụrụ nke Tailwind CSS, na-achọ ime ka ndị mmepe nwee klaasị ịba uru dị ala kama ịbụ ihe emebere mbụ. Usoro a nwere ike iyi ihe siri ike na mbụ n'ihi verbosity nke HTML gị; Otú ọ dị, ozugbo ghọtara, ọ na-enyere prototyping ngwa ngwa na mmepụta-ọkwa nhazi.

N'ime ihe eji arụ ọrụ-nke mbụ, klaasị ọ bụla dabara n'ụdị njiri mara. Dịka ọmụmaatụ, klaasị etiti ederede ga-edozi ederede gị na etiti, ebe bg-blue-500 ga-enye mmewere gị otu ndò nke okirikiri anụnụ anụnụ.

Ụzọ a na-akwalite nrụpụta akụrụngwa ma na-ebelata ọnụọgụ CSS ị na-ede, na-ewepụ okwu nkịtị dị ka agha kpọmkwem na mkpochapụ koodu nwụrụ anwụ.

2. Nkwenye na-anabata

Tailwind CSS na-akakwa mma n'ichepụta ihe. Ọ na-eji usoro nkwụsịtụ nke mbụ nke mkpanaka, nke pụtara na ụdị etinyere na nseta ndị pere mpe nwere ike ịbanye na nke buru ibu ngwa ngwa. Enwere ike ime nke a site na iji prefixes dị mfe dị ka sm:, md:, lg:, na xl: tupu klaasị ike gị.

Dịka ọmụmaatụ, md:text-center ga-etinye naanị klaasị etiti ederede na ihuenyo ọkara na nnukwu. Nke a na-enye gị ohere ịmepụta nke ọma maka nha ihuenyo dị iche iche, na-eme ka imewe na-anabata ikuku na Tailwind.

3. Ejigharị Ụdị

Ọ bụ ezie na ịba uru-nke mbụ na-agba ume itinye ụdịdị ozugbo na HTML gị, ịmegharị ngwakọ dị mgbagwoju anya nke akụrụngwa nwere ike ịghọ ihe siri ike. N'ebe a, ntuziaka Tailwind @apply na-aghọ ihe nzọpụta, na-enye gị ohere iwepụta ụdị ugboro ugboro na klaasị CSS.

Dịka ọmụmaatụ, ọ bụrụ na ị na-ejikarị nchikota bg-red-500 ederede-ọcha p-6, ị nwere ike ịmepụta klaasị ọhụrụ dị ka .error wee jiri @apply ijikwa ụdị ndị a ọzọ. Nke a na-eme ka agụ koodu na nrụgide.

4. Na-agbakwụnye Ụdị omenala

N'agbanyeghị na Tailwind CSS na-abịa na klaasị bara uru, ị nwere ike ịchọ ụdị omenala maka ihe achọrọ. Tailwind na-enye ọtụtụ nhọrọ nhazi site na faịlụ nhazi ya, tailwind.config.js.

Ị nwere ike ịgbatị nhazi ndabara, ịmepụta agba omenala, ebe nkwụsịtụ, mkpụrụedemede, na ndị ọzọ. Ọ dị mkpa, Otú ọ dị, iji njirimara a obere ihe iji gbochie bloating faịlụ nhazi gị.

5. Ọrụ & Ntuziaka

Tailwind CSS na-enye ọtụtụ ọrụ na ntuziaka iji mee ka ahụmịhe mmepe gị dịkwuo nro. Dịka ọmụmaatụ, ọrụ isiokwu() na-enye gị ohere ịnweta ụkpụrụ nhazi gị ozugbo na CSS gị, na-eme ka nhazi dị ike.

Ọzọkwa, ntuziaka Tailwind, dị ka @responsive, @variants, na @apply, na-enye gị ohere iwepụta nzaghachi, ụdị steeti, wee wepụta ụdị ugboro ugboro, n'otu n'otu. Iji ọrụ na ntuziaka ndị a nke ọma ga-eme ka usoro mmepe gị dịkwuo ngwa ma debe koodu ntọala gị.

6. Ijikwa hover, elekwasị anya, na steeti ndị ọzọ

Mpaghara ọzọ ebe Tailwind CSS na-enwu na-ejikwa steeti mmewere dị iche iche. Itinye ụdị n'ụdị na hover, iledo anya, arụ ọrụ na steeti ndị ọzọ dị mfe dị ka idebe klaasị ịba uru na aha steeti.

Dịka ọmụmaatụ, hover:bg-blue-500 ga-etinye klaasị bg-blue-500 mgbe mmewere ahụ gafere. Prefixes ndị a na-enye njikwa ọkwa dị elu maka otu ihe si eme na steeti dị iche iche, na-eme ka ahụmịhe onye ọrụ saịtị gị dịkwuo elu.

Na mmechi, ịmụta usoro kacha mma Tailwind CSS ndị a nwere ike ịkwalite usoro mmepe weebụ gị nke ukwuu. Ụzọ bara uru-mbụ, mgbe ejikọtara ya na iji ụdịdị, nhazigharị, na aka nke ọma eme ihe dị irè

Jiri DivMagic kwalite usoro ọrụ Tailwind CSS gị

Ọ bụrụ na ị na-achọ imeziwanye usoro ọrụ Tailwind CSS gị, lelee DivMagic, ndọtị ihe nchọgharị na-enye gị ohere idetu ma tụgharịa klaasị Tailwind CSS ozugbo site na ihe nchọgharị gị, ọ na-arụkwa ọrụ na weebụsaịtị ọ bụla.

Chrome:Wụnye maka Chrome

Firefox:Wụnye maka Firefox

Nweta nzaghachi ma ọ bụ nsogbu? Mee ka anyị mara site na ikpo okwu anyị, anyị ga-ejikwa ndị ọzọ!