Ukuba ufuna ukwakha iiwebhusayithi zala maxesha, eziphendulayo, nezibukekayo, iTailwind CSS sisikhokelo sakho sokuya kuyo. Iguqula inkqubo yogunyaziso yeCSS yemveli, ikuvumela ukuba wenze ujongano lwesiko ngqo kwi-HTML yakho. I-Tailwind CSS yenye yezona zikhokelo zeCSS ezidumileyo ezinofakelo olungaphezulu kwezigidi ezi-5 ngeveki.
Nge-Tailwind CSS, ukuyila uyilo oluntsonkothileyo kuba yimpepho. Ukudityaniswa kweeklasi eziluncedo kunye nezixhobo zoyilo eziphendulayo zikuvumela ukuba uyile uyilo oluntsonkothileyo ngokulula, ngaphandle kokuphazamisa ukusebenza kunye nokugcinwa kwewebhusayithi yakho.
Ubuhle beTailwind CSS ilele ekuguquguqukeni kwayo. Unokwenza nantoni na ukusuka kwiphepha lebhlog elilula ukuya kwiqonga eliphambili le-e-commerce, lonke ngelixa usebenzisa iiklasi eziluncedo ezifanayo.
Ulinganiselwe kuphela yintelekelelo yakho. Umahluko ophambili ekusebenziseni iVanilla CSS sisantya apho unokwakha khona uyilo lwesiko.
Indlela yemveli yokusebenzisa iiklasi ze-css ezinamacandelo e-html afana ne-div, iklasi ye-div, iklasi ye-p ihlala iyinketho kodwa ukuphuculwa kwesantya esiza kunye ne-Tailwind CSS kwenza ubomi bakho bube lula.
Ngokwesiko, i-CSS ibhalwa ngokuseka isethi yeendlela zehlabathi kunye nokuzicokisa ngokwecandelo-ngecandelo. Nangona le yindlela eyaziwayo, inokukhokelela kwikhowudi enkulu, enzima ukuyigcina.
I-Tailwind CSS icela umngeni kule ngcamango, iphikisa ukuba i-CSS yokuqala inika isicoci, isisombululo esinokugcinwa ngakumbi.
I-daisyUI lelona thala leencwadi lidumileyo le-Tailwind CSS, liqhayisa ngaphezu kwe-50 yezinto eziyilwe kwangaphambili, iiklasi eziluncedo ezingama-500+, kunye namathuba angenasiphelo. Ikugcina ekubuyiseleni ivili ngalo lonke ixesha usenza iprojekthi entsha.
Endaweni yokuchitha ixesha lakho ngenkqubo edinayo yokubhala inkitha yamagama eklasi kwiprojekthi nganye entsha, i-Tailwind CSS ikuvumela ukuba usebenzise iiklasi eziluncedo ezichazwe kakuhle, zesemantic.
Ezi klasi zisebenziseka kwakhona kwaye zisebenza ngemvisiswano kunye neCSS cascade, zibonelela ngesiseko esomeleleyo sazo zonke iiprojekthi zakho.
Embindini wayo, iTailwind CSS sisikhokelo seCSS esiluncedo. Oku kuthetha ukuba ibonelela ngenqanaba elisezantsi, iiklasi eziluncedo ezinokusebenziseka ongazisebenzisa ukwakha naluphi na uyilo, ngokuthe ngqo kwi-HTML yakho. Azisekho iifayile ze-CSS ezingapheliyo, ikhowudi kuphela elula kunye ne-intuitive.
Amagama eklasi yeSemantic aphucula ukufundeka kwekhowudi yakho, okwenza kube lula ukuqonda ukuba yintoni eyenziwa yiklasi ethile ngokujonga igama layo. Le yenye yezinto ezininzi ezamkelwa nguTailwind CSS ukuphucula amava omphuhlisi.
I-Tailwind CSS ayikubophelelanga kuso nasiphi na isakhelo esithile. Yi-CSS esulungekileyo, ke unokuyisebenzisa naso nasiphi na isakhelo, okanye nokuba akukho sikhokelo kwaphela. Isebenza kuyo yonke indawo apho iCSS isebenza khona.
Izibonelelo zokusebenzisa i-Tailwind CSS ibandakanya ukunyuka kwemveliso, ukunciphisa ubungakanani befayile ye-CSS, kunye namava omphuhlisi aphuculweyo ngenxa yendlela yokusebenza yokuqala. Ukongeza, imowudi ye-Just-In-Time (JIT) ibonelela ngamaxesha okwakha ombane ngokukhawuleza, ikhawulezisa inkqubo yakho yophuhliso.
I-Tailwind CSS yiprojekthi yomthombo ovulekileyo, nto leyo ethetha ukuba isetyenziswa simahla. Iindleko ziza xa ufuna ukufikelela kwiimpawu zeprayimari ezifana nezixhobo ze-UI kunye neetemplates, ezinikezelwa nge-Tailwind UI.
I-Tailwind CSS ibonelela ngoluvo oluqinileyo malunga nendlela yokumisa iCSS yakho, kodwa ibhetyebhetye ngokwaneleyo ukuvumela ukwenziwa. Olu lungelelwano lukwenza ukuba ugxile kweyona nto ibalulekileyo - ukwakha ii-UI ezintle.
I-Tailwind CSS yamkela iimpawu zangoku njengeFlexbox, iGridi, kunye neempawu zesiko, iyenza ibe lolona khetho lubalaseleyo lokuphuhlisa usetyenziso lwewebhu lwangoku.
Ngaphambi kokuba uqale ukusebenzisa i-Tailwind CSS, udinga ukuqonda okusisiseko kwe-HTML kunye neCSS.
I-Tailwind CSS ifanelekile kuzo zonke iintlobo zeeprojekthi zewebhu, ezinkulu okanye ezincinci. Ukuba udiniwe kukujijisana neCSS kwaye ujonge isisombululo esisebenza ngakumbi, esinomphuhlisi, ke iTailwind CSS yeyakho.
Ukuba awungomlandeli wesakhelo secandelo njengeReact okanye iVue, akukho maxhala. I-Tailwind CSS yi-framework-agnostic kwaye inokusetyenziswa nge-HTML ecocekileyo kunye neJavaScript.
Ngelixa ezinye izikhokelo ezifana neBootstrap kunye neSiseko zibonelela ngamacandelo enziwe kwangaphambili, i-Tailwind CSS ikunika izixhobo zokwakha uyilo lwesiko ngokupheleleyo ngaphandle kokushiya i-HTML yakho. Nangona kunjalo, ngokudityaniswa kwamathala eencwadi anjenge-daisyUI, ngoku unokonwabela ezona hlabathi zimbini.
Enye yezinto zamva nje ze-Tailwind CSS kunye ne-daisyUI yimowudi emnyama, ekuvumela ukuba wenze iiwebhusayithi ezinemixholo emnyama ngaphandle komzamo.
I-Tailwind CSS idibanisa kakuhle kunye neempawu zeCSS zangoku njengeFlexbox. Umzekelo, ungenza ubeko oluphendulayo usebenzisa iiklasi ezifana ne-flex, justify- center, items-center, njalo njalo.
Ngokudityaniswa kweXesha nje, unokuzama amaxabiso odidi oluluncedo ahlukeneyo ngokulula. Ukuba enye iklasi yoncedo ayisebenzanga, yitshintshe ngokulula ukwenza into yakho.
Ukusebenzisa i-Tailwind CSS, kulula ukwenza iiplani ezintsonkothileyo njengebha yokukhangela ephendulayo. Nanku umzekelo:
<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
</div>
<div class="block lg:hidden">
<button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"></path></svg>
</button>
</div>
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<div class="text-sm lg:flex-grow">
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">Home</a>
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">About</a>
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">Contact</a>
</div>
</div>
</nav>
Ukuba uthathe isigqibo sokusebenzisa ikhowudi ye-css ye-tailwind kwiprojekthi yakho, uya kuba nakho ukufumana izinto ezininzi ezenziwe kwangaphambili kwi-intanethi. Ungakopa nayiphi na kwezi kwaye wenze ngokwezifiso iwebhusayithi yakho.
Ukukwazi ukuguqula iCSS ibe ziiklasi zeTailwind CSS yinto efunwa ngabaphuhlisi abaninzi. Zininzi iiwebhusayithi kwi-intanethi ezakhiwe ngaphambi kokuba iTailwind CSS ibekho. La maphepha ewebhu asebenzisa i-css enecwecwe lesimbo kunye neengcali zophuhliso lwewebhu zifuna ukufuduka la maphepha aye kwi-Tailwind CSS.
I-DivMagic sisixhobo sophuhliso lwewebhu esakhelwe umphuhlisi wewebhu kunye nabaphuhlisi besoftware. Ivumela nasiphi na isitayile ukuba sikotshwe ukusuka kwi-vanilla css ukuya kwi-Tailwind CSS. Ngokucofa kanye, unokuguqula naliphi na icandelo kwi-intanethi libe yi-Tailwind CSS kwaye usebenzise i-Tailwind kwiprojekthi yakho kwaye wenze isitayile ngendlela oyifunayo ngayo.
Ifilosofi emva kweTailwind CSS kukugxila kwizinto eziluncedo. Oku kuthetha endaweni yokuchaza kwangaphambili iiklasi zecandelo, i-Tailwind CSS ibonelela ngeeklasi eziluncedo ezikwinqanaba elisezantsi ezenza ukuba wenze uyilo olulodwa ngaphandle kokushiya iHTML yakho.
I-CSS yesiNtu inokubangela ukusetyenziswa ngokugqithisileyo kokugqithiswayo, iifayile ezidumbileyo, kunye 'nesuphu ye-div'. Ngokutshintshela kwisakhelo se-CSS esiluncedo njenge-Tailwind CSS, unokunciphisa le miba, ibangele isicoci, ikhowudi yekhowudi elungelelanisiweyo.
Iiklasi eziluncedo zikunceda ukuba unqande ukuphinda izitayile ezifanayo kuwo onke amaphepha akho esitayile. Ngumgaqo othi "Musa ukuphinda-phinda" (DRY). Ezi klasi zikugcina ixesha elibalulekileyo kunye nomzamo kwaye zikhokelela kwi-codebase egcinekayo.
I-Tailwind CSS yazisa izikhokelo ezimbalwa ezinokuthi zisetyenziswe ngaphakathi kwamaphepha akho esitayile. Ezi ziquka @apply, @variants, kwaye @screen. Ukuqonda kunye nokusebenzisa le miyalelo kunokuphucula kakhulu amava akho e-Tailwind CSS. Ezi zinokufakwa kwifayile ye-CSS ye-Tailwind. Ungabhala iiklasi ze-css usebenzisa le ndlela.
I-Tailwind CSS inokwandiswa ngeeplagi, ukongeza ukusebenza okutsha okanye ukwenza ngokwezifiso ekhoyo. Funda ukuba ungazisebenzisa njani iiplagi ukuze ukwandise ukusebenza kakuhle kunye nobuhle beeprojekthi zakho zewebhu.
Ukudibanisa i-Tailwind CSS kuhambo lwakho lophuhliso luthe ngqo, nokuba usebenzisa izixhobo zokwakha ezifana neWebpack okanye iParcel, okanye usebenza ngezakhelo ezifana ne-Next.js okanye iGatsby.
I-Tailwind CSS ikhuthaza ukuyila okufikelelekayo ngokubandakanya uluhlu lweempawu ze-ARIA kwiiklasi zayo. Yenza unxibelelwano olufikelelekayo kwaye uphucule amava omsebenzisi kuye wonke umntu.
Sebenzisa imodyuli yoyilo lwangoku lweCSS njengeFlexbox kunye neGridi eneTailwind CSS. Funda ukuba iiklasi eziluncedo zingasetyenziswa njani ukulawula uyilo ngendlela eguquguqukayo nephendulayo.
I-Tailwind CSS ibonelela ngezixhobo ezininzi zokulungisa iimpazamo kunye neendlela ezenza ukuba kube lula ukuchonga nokusombulula imiba yesimbo. Qonda ezi zixhobo kwaye uphucule izakhono zakho zokulungisa iimpazamo.
I-Tailwind CSS iza nephalethi ebanzi yemibala enokwenziwa ngokwezifiso. Funda indlela yokusebenzisa kunye nokwenza ngokwezifiso le mibala ukwenza uyilo oludlamkileyo nolubonakalayo.
Ngena nzulu kwimowudi ye-Tailwind CSS's Just-In-Time. Qonda indlela esebenza ngayo kunye nendlela enokukhawulezisa ngayo uphuhliso lwakho kunye namaxesha okwakha.
Qalisa kuhambo oluya kwi-Tailwind CSS. Ukusuka ekusekweni okusingqongileyo ukuya ekuphononongeni izihloko eziphambili, esi sikhokelo sibanzi sikugqubuthele.
Enye yezona zinto zinamandla zeTailwind CSS kukuguquguquka kwayo. Funda ukwenza ngokwezifiso iTailwind ukuze ihambelane neemfuno zeprojekthi yakho.
Zibandakanye ekufundeni ngokufunda ngothotho lwemizekelo ebonakalayo. Phonononga indlela yokwakha iinxalenye zewebhu ezahlukeneyo usebenzisa iTailwind CSS kunye neDaisyUI.
Ucinga ngokutshintshela kwiTailwind CSS? Qonda umahluko ophambili phakathi kweTailwind kunye nezinye izikhokelo, kwaye ufunde amaqhinga asebenzayo okuhambisa iiprojekthi zakho.
Ungasebenzisa iDivMagic okanye izixhobo ezifanayo ukonyusa kakhulu isantya sokufuduka kwakho.
Izixhobo zophuhliso lwewebhu ezifana ne-DivMagic zikuvumela ukuba ukope nayiphi na into yoyilo kunye naluphi na uhlobo oluvela kuyo nayiphi na iwebhusayithi ngonqakrazo olunye.
Nanku umzekelo wendlela onokwakha ngayo icandelo lekhadi eliphendulayo usebenzisa iTailwind CSS. Eli candelo liza kuba nomfanekiso, isihloko, kunye nenkcazo.
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="/img/store.jpg" alt="Store">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Your Product</div>
<p class="mt-2 text-gray-500">This is a brief description of your product. The card uses utility classes for padding, text color, and the uppercase font styling.</p>
</div>
</div>
</div>
Ukwenza ifom nge-Tailwind CSS iqondile kwaye inembile. Nantsi ifom yoqhagamshelwano elula:
<div class="w-full max-w-xs">
<form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="username">
Username
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
</div>
<div class="mb-6">
<label class="block text-gray-700 text-sm font-bold mb-2" for="password">
Password
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
</div>
<div class="flex items-center justify-between">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
Sign In
</button>
</div>
</form>
</div>
I-Tailwind CSS ikuvumela ukuba ulungelelanise ulungelelwaniso lwayo olungagqibekanga, ulungelelanisa iiklasi eziluncedo kwiimfuno zakho. Ngezantsi kukho i-eyi umzekelo wendlela yokwenza ipalethi yombala ngokwezifiso.
Le mizekelo ibonisa ukuguquguquka kunye nokulula kwe-Tailwind CSS, ebonisa indlela abanokukunceda ngayo ukudala izixhobo zewebhu zangoku, eziphendulayo ngokufanelekileyo nangempumelelo.
module.exports = {
theme: {
extend: {
colors: {
'custom-blue': '#243c5a',
'custom-green': '#387c6d',
}
}
}
}
Ifayile kuphela oyifunayo nge Tailwind CSS yi tailwind.config.js ifayile.
Loo fayile iya kubamba useto lwakho loqwalaselo. Awuyi kubhala i-css okanye ube nayo nayiphi na enye ifayile ye-css. Le fayile yoqwalaselo yiyo kuphela oya kuyidinga.
Ukufumana inkcazo eneenkcukacha malunga nezona ndlela zibalaseleyo ze-Tailwind CSS, nceda ubone elinye inqaku lethu le-Tailwind CSS yeZenzo ezilungileyo.
Cinga ngendlela iTailwind CSS ebumba ngayo ikamva loyilo lwewebhu. Funda malunga neempembelelo zayo kunye nokubanakho ukukhula kushishino lophuhliso lwewebhu.
Joyina uluhlu lwe-imeyile yeDivMagic!
© 2024 DivMagic, Inc. Onke amalungelo agciniwe.