Ọ bụrụ na ịchọrọ iwulite webụsaịtị ọgbara ọhụrụ, na-anabata ma na-adọrọ adọrọ, Tailwind CSS bụ ihe aga-eme gị. Ọ na-agbanwe usoro ịde akwụkwọ CSS ọdịnala, na-enye gị ohere ịmepụta oghere omenala ozugbo na HTML gị. Tailwind CSS bụ otu n'ime usoro CSS kachasị ewu ewu nwere ihe nrụnye karịrị nde ise kwa izu.
Site na Tailwind CSS, imepụta atụmatụ dị mgbagwoju anya na-aghọ ikuku. Nchikota nke klaasị bara uru na ihe eji emepụta ihe na-enye gị ohere ịmepụta nhazi mgbagwoju anya n'ụzọ dị mfe, na-emebighị arụmọrụ na nrụgide nke weebụsaịtị gị.
Mma nke Tailwind CSS dabere na ike ya. Ị nwere ike ịmepụta ihe ọ bụla site na ibe blọọgụ dị mfe gaa na ikpo okwu e-azụmahịa dị elu, niile mgbe ị na-eji otu klaasị ịba uru.
A na-amachi gị naanị site n'echiche gị. Isi ihe dị iche site na iji Vanilla CSS bụ ọsọ nke ị nwere ike wuo atụmatụ omenala.
Usoro ọdịnala nke iji klaasị css omenala nwere ihe HTML dị ka div, klas div, p class bụ nhọrọ mgbe niile mana nkwalite ọsọ na-abịa na Tailwind CSS na-eme ka ndụ gị dịkwuo mfe.
N'ọdịnala, a na-ede CSS site n'ịmepụta usoro nke ụdị zuru ụwa ọnụ na imezi ha n'usoro ihe mejupụtara ya. Ọ bụ ezie na nke a bụ usoro na-ewu ewu, ọ nwere ike iduga na koodu buru ibu, nke siri ike idowe.
Tailwind CSS na-agbagha echiche a, na-arụ ụka na ịba uru-nke mbụ CSS na-enye ngwọta dị ọcha na nke a na-echekwa.
daisyUI bụ ọba akwụkwọ akụrụngwa kachasị ewu ewu maka Tailwind CSS, na-anya isi ihe karịrị 50 emebere mbụ, klaasị 500+, yana ohere na-enweghị ngwụcha. Ọ na-azọpụta gị site na ịmegharị wheel ahụ oge ọ bụla ị mepụtara ọrụ ọhụrụ.
Kama iwefu oge gị na usoro na-agwụ ike nke ide ọtụtụ aha klaasị maka ọrụ ọhụrụ ọ bụla, Tailwind CSS na-enyere gị aka iji usoro ọmụmụ ihe akọwapụtara nke ọma, nke semantic.
Klas ndị a nwere ike ijikwa ya ma na-arụkọ ọrụ ọnụ na CSS cascade, na-enye gị ntọala siri ike maka ọrụ gị niile.
Na isi ya, Tailwind CSS bụ akụrụngwa-nke mbụ CSS kpuchie. Nke a pụtara na ọ na-enye klaasị bara uru nke nwere ike iji wuo ihe ọ bụla, ozugbo na HTML gị. Enweghị faịlụ CSS na-adịghị agwụ agwụ, naanị koodu dị mfe na nghọta.
Aha klaasị semantic na-eme ka koodu gị dị mfe, na-eme ka ọ dịkwuo mfe ịghọta ihe otu klas na-eme naanị site na ilele aha ya anya. Nke a bụ otu n'ime ọtụtụ atụmatụ Tailwind CSS nakweere iji kwalite ahụmịhe onye nrụpụta.
Tailwind CSS anaghị ejikọta gị na usoro ọ bụla akọwapụtara. Ọ bụ naanị CSS dị ọcha, yabụ ị nwere ike iji ya na usoro ọ bụla, ma ọ bụ na-enweghị usoro ọ bụla. Ọ na-arụ ọrụ n'ebe ọ bụla CSS na-arụ ọrụ.
Uru nke iji Tailwind CSS gụnyere mmụba arụpụtaghị ihe, mbelata nha faịlụ CSS, yana ahụmịhe onye nrụpụta emelitere n'ihi usoro ịba uru-mbụ. Na mgbakwunye, ụdị Just-In-Time (JIT) na-enye oge ọkụ ọkụ ọkụ, na-eme ka usoro mmepe gị dịkwuo elu.
Tailwind CSS bụ ọrụ mepere emepe, nke pụtara na ọ nweghị ohere iji. Ọnụ ego a na-abịa mgbe ịchọrọ ịnweta njirimara adịchaghị dị ka ngwa UI na ndebiri, nke a na-enye site na Tailwind UI.
Tailwind CSS na-enye echiche siri ike maka otu esi ahazi CSS gị, mana ọ na-agbanwe nke ọma iji kwe ka nhazi ya. Nhazi a na-enyere gị aka ilekwasị anya n'ihe kacha mkpa - wulite UI mara mma.
Tailwind CSS na-anabata atụmatụ ọgbara ọhụrụ dị ka Flexbox, Grid, na akụrụngwa omenala, na-eme ka ọ bụrụ nhọrọ magburu onwe ya maka ịmepụta ngwa weebụ ọgbara ọhụrụ.
Tupu ịmalite iji Tailwind CSS, ịchọrọ nghọta bụ isi nke HTML na CSS.
Tailwind CSS dabara maka ụdị ọrụ weebụ niile, nnukwu ma ọ bụ obere. Ọ bụrụ na ike gwụ gị na mgba na CSS na-achọ ka ọ dị irè karị, ngwọta enyi na enyi, mgbe ahụ Tailwind CSS bụ maka gị.
Ọ bụrụ na ị bụghị onye na-akwado akụrụngwa akụrụngwa dị ka React ma ọ bụ Vue, enweghị nchekasị. Tailwind CSS bụ framework-agnostic na enwere ike iji HTML na Javascript dị ọcha.
Ọ bụ ezie na usoro ndị ọzọ dị ka Bootstrap na Foundation na-enye ihe ndị a haziri ahazi, Tailwind CSS na-enye gị ngwá ọrụ iji wuo atụmatụ omenala kpamkpam na-ahapụghị HTML gị. Agbanyeghị, site na njikọta nke ọba akwụkwọ akụrụngwa dị ka daisyUI, ị nwere ike ịnụ ụtọ ugbu a ọmarịcha ụwa abụọ ahụ.
Otu n'ime njirimara kachasị ọhụrụ nke Tailwind CSS na daisyUI bụ ọnọdụ gbara ọchịchịrị, nke na-enyere gị aka ịmepụta weebụsaịtị nwere isiokwu gbara ọchịchịrị n'enweghị mgbalị ọ bụla.
Tailwind CSS jikọtara nke ọma na njirimara CSS ọgbara ọhụrụ dị ka Flexbox. Dịka ọmụmaatụ, ịnwere ike ịmepụta nhazi nzaghachi site na iji klaasị dị ka flex, justify-center, ihe-center, na ndị ọzọ.
Site na nchikota nke Just-in-Time, ị nwere ike ịnwale ụkpụrụ klaasị dị iche iche n'ụzọ dị mfe. Ọ bụrụ na otu klaasị ịba uru anaghị arụ ọrụ, naanị gbanwee ya ka ị hazie mmewere gị.
Iji Tailwind CSS, ọ dị mfe ịmepụta okirikiri nhọrọ ukwuu dị ka mmanya igodo na-anabata. Nke a bụ ọmụmaatụ:
<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>
Ọ bụrụ n’ikpebiri iji koodu css ọdụ azụ n’ọrụ gị, ị ga-enwe ike ịchọta ọtụtụ ngwa emebere n'ịntanetị. Ị nwere ike iṅomi nke ọ bụla n'ime ndị a ma hazie maka weebụsaịtị nke gị.
Inwe ike ịtụgharị CSS ka ọ bụrụ klaasị Tailwind CSS bụ ihe ọtụtụ ndị mmepe chọrọ. Enwere ọtụtụ webụsaịtị na ịntanetị wuru tupu Tailwind CSS adị. Ibe weebụ ndị a na-eji css nwere ụdị ụdị na ndị ọkachamara mmepe webụ chọrọ ịkwaga ibe ndị a na Tailwind CSS.
DivMagic bụ ngwa mmepe webụ arụpụtara maka ndị nrụpụta webụ yana ndị nrụpụta ngwanrọ. Ọ na-enye ohere ka e depụtaghachi ụdị ọ bụla site na vanilla css gaa na Tailwind CSS. Na otu ọpịpị, ị nwere ike tọghata akụrụngwa ọ bụla na ịntanetị gaa na Tailwind CSS wee jiri Tailwind rụọ ọrụ gị wee hazie ụdị ahụ n'ụzọ ọ bụla ịchọrọ.
Nkà ihe ọmụma dị n'azụ Tailwind CSS bụ ilekwasị anya na ịba uru. Nke a pụtara kama ịkọwapụta klaasị akụrụngwa, Tailwind CSS na-enye klaasị uru dị ala nke na-enyere gị aka ịrụ ụdị pụrụ iche na-ahapụghị HTML gị.
CSS ọdịnaala nwere ike bute oke ngafe, faịlụ furu efu na 'fefe div'. Site n'ịtụgharị gaa na usoro CSS nke mbụ dị ka Tailwind CSS, ị nwere ike ibelata okwu ndị a, na-eme ka ọ dị ọcha, na-emepe koodu codebase.
Klas bara uru na-enyere gị aka ịzenarị ịmegharị otu ụdịdị ahụ n'ime mpempe akwụkwọ gị niile. Ọ bụ ụkpụrụ nke "Edoghachi onwe gị" (DRY). Klas ndị a na-azọpụta gị oge na mbọ dị ukwuu ma na-eduga na codebase a na-echekwa nke ọma.
Tailwind CSS na-ewebata ntuziaka ole na ole enwere ike iji n'ime ụdị ụdị gị. Ndị a gụnyere @apply , @variants , na @screen. Ịghọta na iji ntuziaka ndị a n'ọrụ nwere ike ịkwalite ahụmịhe CSS Tailwind gị nke ukwuu. Enwere ike idobe ndị a na faịlụ Tailwind Config CSS. Ị nwere ike iji usoro a dee klaasị css.
Enwere ike ịgbatị Tailwind CSS na plugins, na-agbakwunye ọrụ ọhụrụ ma ọ bụ hazie nke dị adị. Mụta otu esi etinye plugins iji bulie arụmọrụ yana ọmarịcha ọrụ weebụ gị.
Ijikọ Tailwind CSS n'ime usoro ọrụ mmepe gị kwụ ọtọ, ma ị na-eji ngwa nrụpụta dị ka Webpack ma ọ bụ Parcel, ma ọ bụ na-arụ ọrụ na frameworks dị ka Next.js ma ọ bụ Gatsby.
Tailwind CSS na-akwado imewe a na-enweta site na ịgụnye ọtụtụ njirimara ARIA na klaasị ya. Mepụta oghere ndị ọzọ enwere ike ịnweta ma kwalite ahụmịhe onye ọrụ maka onye ọ bụla.
Were modul okirikiri nhọrọ ukwuu CSS ọgbara ọhụrụ dị ka Flexbox na Grid na Tailwind CSS. Mụta ka enwere ike iji klaasị ịba uru jikwaa okirikiri nhọrọ ukwuu n'ụzọ na-anabata ya.
Tailwind CSS na-enye ọtụtụ ngwaọrụ nbibi na usoro na-eme ka ịchọpụta na idozi okwu nhazi dị mfe. Ghọta ngwaọrụ ndị a ma welie nka nbipu gị.
Tailwind CSS na-abịa na palette sara mbara nke agba nwere ike ịhazi ya. Mụta ka esi eji na hazie agba ndị a iji mepụta atụmatụ na-adọrọ adọrọ ma mara mma.
Banye n'ime ọnọdụ Tailwind CSS's Just-In-Time. Ghọta ka o si arụ ọrụ yana otu ọ nwere ike isi mee ka mmepe gị dị ngwa ma wuo oge.
Banye na njem iji mara Tailwind CSS. Site n'ịtọlite gburugburu gị ruo n'ịchọgharị isiokwu dị elu, ntuziaka a zuru oke ka ị kpuchiri.
Otu ike kachasi ike nke Tailwind CSS bụ mgbanwe ya. Mụta ka esi hazie Tailwind ka ọ dabara na mkpa ọrụ gị akọwapụtara.
Tinye aka na mmụta site na usoro ihe atụ bara uru. Chọgharịa otu esi ewupụta akụrụngwa webụ dị iche iche site na iji Tailwind CSS na DaisyUI.
Ị na-atụle ịgbanwe na Tailwind CSS? Ghọta isi ihe dị iche n'etiti Tailwind na usoro ndị ọzọ, wee mụta usoro dị irè maka ịkwaga ọrụ gị.
Ị nwere ike iji DivMagic ma ọ bụ ngwaọrụ ndị yiri ya iji mee ka ọsọ njem gị dịkwuo ukwuu.
Ngwá ọrụ mmepe webụ dị ka DivMagic na-enye gị ohere iji otu ọpịpị detuo mmewere ọ bụla imewe na ụdị ọ bụla site na weebụsaịtị ọ bụla.
Nke a bụ ọmụmaatụ otu ị ga-esi wulite akụrụngwa na-anabata kaadị site na iji Tailwind CSS. Akụkụ a ga-enwe onyonyo, aha na nkọwa.
<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>
Ịmepụta ụdị na Tailwind CSS bụ ihe kwụ ọtọ na nghọta. Nke a bụ fọm kọntaktị dị mfe:
<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>
Tailwind CSS na-enye gị ohere ịhazi nhazi nke ndabara ya, na-eme ka klaasị akụrụngwa dabara na mkpa gị. N'okpuru ebe a bụ ihe atụ nke otu esi edozi palette agba.
Ihe atụ ndị a na-egosi mgbanwe na ịdị mfe nke Tailwind CSS, na-egosi otu ha nwere ike isi nyere gị aka ịmepụta ihe ntanetị nke oge a, na-anabata nke ọma na nke ọma.
module.exports = {
theme: {
extend: {
colors: {
'custom-blue': '#243c5a',
'custom-green': '#387c6d',
}
}
}
}
Naanị faịlụ ịchọrọ na Tailwind CSS bụ faịlụ tailwind.config.js.
Faịlụ ahụ ga-ejide ntọala nhazi gị. Ị gaghị na-ede css ma ọ bụ nwee faịlụ css ọ bụla ọzọ. Faịlụ nhazi a bụ naanị nke ị ga-achọ.
Maka nkọwa zuru ezu gbasara omume kacha mma Tailwind CSS, biko lee edemede anyị ọzọ Omume kacha mma Tailwind CSS.
Tụgharịa uche n'otú Tailwind CSS si na-akpụzi ọdịnihu nke imewe weebụ. Mụta maka mmetụta ya na ikike ọ nwere maka uto na ụlọ ọrụ mmepe weebụ.
Sonye na listi email DivMagic!
© 2024 DivMagic, Inc. Ikike niile echekwabara.