Tailwind CSS - wulite webụsaịtị ọgbara ọhụrụ ngwa ngwa na-ahapụghị HTML gị

Mepụta ihe mgbagwoju anya na mfe

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ị.

Mee ihe ọ bụla

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.

Omume kacha mma anaghị arụ ọrụ

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.

Ọbá akwụkwọ akụrụngwa kacha ewu ewu maka Tailwind CSS

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ụ.

Emeghachighachila wheel ahụ oge ọ bụla

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.

Tailwind CSS - Arụmọrụ mbụ CSS Framework

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.

Jiri Aha klaasị Semantic

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.

CSS dị ọcha. Framework Agnostic. Na-arụ ọrụ ebe niile

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 Tailwind CSS

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.

Ọnụ ahịa Tailwind CSS

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.

Ọ bụ echiche na mgbanwe n'otu oge

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.

Atụmatụ ọgbara ọhụrụ

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ụ.

Ihe achọrọ maka iji Tailwind CSS

Tupu ịmalite iji Tailwind CSS, ịchọrọ nghọta bụ isi nke HTML na CSS.

Mgbe iji Tailwind 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ụghị n'ime usoro akụrụngwa?

Ọ 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.

Myirịta na ndịiche dị n'etiti Tailwind CSS na Framework CSS ndị ọzọ

Ọ 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ụ.

Ọnọdụ gbara ọchịchịrị

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.

Ọmụmaatụ Flexbox

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ị.

Ihe Nlereanya Nyibe Flexbox

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>

Ngwa ndị ejikere eme

Ọ 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ị.

Otu esi atụgharị CSS ka ọ bụrụ Tailwind CSS

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ọ.

Banye miri emi na Tailwind CSS Philosophy

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ị.

Kedu ihe kpatara eji pụọ na CSS ọdịnala?

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.

Nweta ike nke klaasị bara uru

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.

Ịchọgharị ntụziaka CSS Tailwind

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.

Jiri ngwa mgbakwunye gbatịa Tailwind 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ị.

Tinye CSS Tailwind n'ime usoro ọrụ 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.

Kwalite nnweta na Tailwind CSS

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.

Jikwaa ike nke Flexbox na Grid na Tailwind CSS

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.

Otu esi ehichapụ ọrụ CSS nke ọdụ gị

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ị.

Mepụta Weebụ mara mma na Tailwind CSS

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.

Mepụta ngwa ngwa site na iji Tailwind CSS 'JIT Mode

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.

Site na efu ruo dike: Master Tailwind CSS

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.

Hazie Tailwind CSS ka ọ bụrụ mkpa gị

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.

Inweta aka na Tailwind CSS

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.

Ịga site na CSS Frameworks ndị ọzọ gaa na Tailwind CSS

Ị 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.

Ihe Nlereanya Dị Mfe: Iwulite Ngwa Ngwa Kaadị Na-anabata

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>

Jiri Tailwind CSS wuo mpempe akwụkwọ

Ị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>

Na-ahazi Tailwind CSS

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',
      }
    }
  }
}

Ọ ga-mkpa faịlụ CSS ọ bụla?

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ọ.

Kedu omume kacha mma maka Tailwind CSS?

Maka nkọwa zuru ezu gbasara omume kacha mma Tailwind CSS, biko lee edemede anyị ọzọ Omume kacha mma Tailwind CSS.

Tailwind CSS: Ọdịnihu nke imewe Weebụ

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ụ.