Tailwind CSS - Bi sitiw jɔ teliya la k’a sɔrɔ i ma bɔ i ka HTML la

Aw ye dilancogo gɛlɛnw dilan ni nɔgɔya ye

Ni Tailwind CSS ye, ka dilan gɛlɛnw dilan, o bɛ kɛ fiɲɛ ye. Nafa-klasi ni jaabi-dilan nafalanw faralen ɲɔgɔn kan, o b’a to i bɛ se ka layidu gɛlɛnw dilan ni nɔgɔya ye, k’a sɔrɔ i ma dankari i ka siti baarakɛcogo n’a ladonni na.

Fɛn o fɛn jɔ

Tailwind CSS cɛɲi bɛ bɔ a ka baarakɛcogo caman na. I bɛ se ka fɛn o fɛn dabɔ k’a ta bulɔgu ɲɛ nɔgɔman na ka se ɛntɛrinɛti jagokɛla ŋana dɔ ma, o bɛɛ kɛra k’a sɔrɔ i bɛ baara kɛ ni nafabɔlan kelenw ye minnu bɛ se ka faamuya.

I dan ye i ka miirili dɔrɔn de ye. Danfaraba min bɛ Vanilla CSS baara la, o ye teliya ye i bɛ se ka fɛn dilannenw dilan ka kɛɲɛ ni i yɛrɛ sago ye.

Laadalata fɛɛrɛ min bɛ Kɛ ni css kalasi ladamulenw ye ni html yɔrɔw ye i n’a fɔ div, div class, p class ye sugandi ye tuma bɛɛ nka teliya ɲɛtaa min bɛ Nà ni Tailwind CSS ye o b’i ka ɲɛnamaya nɔgɔya.

Fɛɛrɛ ɲumanw tɛ baara kɛ tiɲɛ na

Laada la, CSS bɛ sɛbɛn ni diɲɛ cogoyaw kulu dɔ sigili ye ani k’u nɔgɔya ka kɛɲɛ ni yɔrɔ kelen-kelen bɛɛ ye. Hali n’o ye fɛɛrɛ ye min ka di mɔgɔw ye, a bɛ se ka kɛ sababu ye ka kode belebelebaw sɔrɔ, minnu ladonni ka gɛlɛn.

Tailwind CSS bɛ nin hakilina in sɔsɔ, k’a fɔ ko CSS min bɛ nafa fɔlɔ la, o bɛ fura saniyalen di, min bɛ se ka ladon.

Tailwind CSS ka component library min ka di kosɛbɛ

daisyUI ye Tailwind CSS ka yɔrɔw gafemarayɔrɔ ye min ka di kosɛbɛ, a bɛ waso ni yɔrɔ 50 ni kɔ ye minnu dilannen don ka kɔn, nafabɔlan 500+, ani seko minnu tɛ ban. A b’i kisi ka wotoro in dabɔ kokura tuma o tuma n’i bɛ porozɛ kura dɔ da.

Kana Segin ka Wotoro Dabɔ tuma bɛɛ

Sani i k’i ka waati tiɲɛ ni baara sɛgɛnbali ye, n’o ye ka kalanso tɔgɔ tan ni caman sɛbɛn porozɛ kura kelen-kelen bɛɛ kama, Tailwind CSS b’a to i bɛ se ka baara kɛ ni nafama kalanw kulu ye min ɲɛfɔlen don koɲuman, kɔrɔko siratigɛ la.

O kalan ninnu bɛ Se ka baara Kɛ kokura wa u bɛ baara Kɛ ɲɔgɔn fɛ ni CSS kasɛti ye, o bɛ jusigilan barikama di i ma i ka porozɛw bɛɛ kama.

Tailwind CSS - Nafa fɔlɔ CSS karamɔgɔya

A kɔnɔko la, Tailwind CSS ye nafama-fɔlɔ CSS karamɔgɔya ye. O kɔrɔ ye ko a bɛ nafalan-klasiw Di minnu ka dɔgɔ, minnu bɛ Se ka Dabɔ, i bɛ Se ka baara Kɛ ni minnu ye walasa ka dilan suguya o suguya jɔ, k’a ɲɛsin i ka HTML ma. CSS filew tɛ yen tugun minnu tɛ ban, kode nɔgɔmanw dɔrɔn ani minnu bɛ se ka faamuya.

Baara kɛ ni Semantiki Kalanso Tɔgɔw ye

Kɔrɔɲɔgɔnma-klasi tɔgɔw bɛ i ka kode kalanni ɲɛ, o b’a to a ka nɔgɔn ka kalasi kɛrɛnkɛrɛnnen dɔ bɛ min kɛ, n’i y’a tɔgɔ lajɛ dɔrɔn. Nin ye fɛn caman dɔ ye Tailwind CSS ye minnu ta walasa ka baarakɛlaw ka ko kɛlenw ɲɛ.

CSS saniyalen. Kalansen Agnostique. Baara bɛ Kɛ Yɔrɔ Bɛɛ

Tailwind CSS t’i siri karamɔgɔ kɛrɛnkɛrɛnnen si la. O ye CSS saniyalen dɔrɔn ye, o la i bɛ Se ka baara Kɛ n’a ye ni karamɔgɔya suguya bɛɛ ye, walima hali ni karamɔgɔya tɛ yen fewu. A bɛ baara Kɛ yɔrɔ bɛɛ la CSS bɛ baara Kɛ yɔrɔ min na.

Nafa minnu bɛ Tailwind CSS la

Nafa minnu bɛ Tailwind CSS baara la, olu ye ka dɔ fara baarakɛcogo kan, ka CSS filenw hakɛ dɔgɔya, ani ka baarakɛlaw ka dɔnniya bonya ka da nafa fɔlɔ fɛɛrɛ kan. Ka fara o kan, Just-In-Time (JIT) cogoya bɛ jɔli waatiw di minnu bɛ teliya i n’a fɔ sanpɛrɛn, o bɛ i ka yiriwali baara teliya ka taa a fɛ.

Tailwind CSS sɔngɔko

Tailwind CSS ye porozɛ dafalen ye, o kɔrɔ ye ko a bɛ se ka baara kɛ ni a ye pewu. O musaka bɛ Nà n’i b’a fɛ ka Se ka fɛn ɲumanw Sɔrɔ i n’a fɔ UI yɔrɔw ni jatebɔlanw, minnu bɛ Di Tailwind UI fɛ.

A bɛ hakilinaw di ani a bɛ se ka fɛn caman sɛgɛsɛgɛ waati kelen na

Tailwind CSS bɛ hakilina barikama di i ka CSS sigicogo kan, o bɛɛ n’a ta, a bɛ se ka wuli ka bɔ a nɔ na walasa ka sira di i ka ladamuni ma. O balansi in b’a to i bɛ se k’i sinsin fɛn kan min nafa ka bon kosɛbɛ — UI cɛɲiw jɔli.

Bi fɛn minnu bɛ yen

Tailwind CSS bɛ bi fɛnw minɛ i n’a fɔ Flexbox, Grid, ani custom properties, o b’a kɛ sugandili ɲuman ye bi ɛntɛrinɛti baarakɛminɛnw labɛnni na.

Baara kɛli ni Tailwind CSS ye

Sani i ka Tailwind CSS baara daminɛ, i ka kan ka faamuyali jɔnjɔn sɔrɔ HTML ni CSS kan.

Tuma min na baara bɛ kɛ ni Tailwind CSS ye

Tailwind CSS bɛnnen don ɛntɛrinɛti porozɛ suguya bɛɛ ma, a ka bon walima a fitinin. N’i ​​sɛgɛnnen don ka kɛlɛ kɛ ni CSS ye ani ka fɛɛrɛ ɲuman ɲini, min bɛ se ka kɛ ni baarakɛlaw ye, o tuma na, Tailwind CSS ye i ta ye.

A ma don component frameworks kɔnɔ wa?

N'i tɛ component frameworks kanubaga ye i n'a fɔ React walima Vue, i kana hami. Tailwind CSS ye framework-agnostic ye wa a bɛ Se ka Kɛ ni HTML saniyalen ni JavaScript ye.

Tailwind CSS ni CSS Framework wɛrɛw bɛ tali kɛ ɲɔgɔn na ani ka danfara don u ni ɲɔgɔn cɛ

K’a sɔrɔ karamɔgɔya wɛrɛw i n’a fɔ Bootstrap ani Foundation bɛ yɔrɔw di minnu dilannen don ka kɔn, Tailwind CSS bɛ baarakɛminɛnw Di i ma walasa ka dilancogo dafalenw jɔ pewu k’a sɔrɔ i ma i ka HTML Bɔ. Nka, ni component libraries (dakunw gafemarayɔrɔw) faralen ɲɔgɔn kan i n’a fɔ daisyUI, sisan i bɛ se ka diɲɛ fila bɛɛ la ɲuman diyabɔ.

Mode Dibi la

Tailwind CSS ni daisyUI ka fɛn laban dɔ ye dibi cogoya ye, o min b’a To i bɛ se ka dibi-ko-websayitiw Dabɔ k’a sɔrɔ i ma cɛsiri Kɛ.

Flexbox Misali la

Tailwind CSS bɛ ɲɔgɔn Dòn kosɛbɛ ni bi CSS baarakɛminɛnw ye i n’a fɔ Flexbox. Misali la, i bɛ se ka jaabi-labɛn dɔ Dabɔ ni kalansenw ye i n’a fɔ flex, justify- center, items-center, ani a ɲɔgɔnnaw.

Ni Just-in-Time faralen don ɲɔgɔn kan, i bɛ se ka nafamafɛnw kalasi nafa suguya wɛrɛw lajɛ nɔgɔya la. Ni utilité classe kelen ma baara kɛ, i k’a Changer dɔrɔn walasa k’i ka element customize.

Flexbox Layidu Misali dɔ

Ni baara kɛra ni Tailwind CSS ye, a ka nɔgɔn ka layidu gɛlɛnw dilan i n’a fɔ jatebɔlan min bɛ jaabi di. Misali dɔ filɛ nin ye:

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

Yɔrɔ minnu labɛnnen don

N’i ​​y’a latigɛ ka baara kɛ ni tailwind css code ye i ka porozɛ kɔnɔ, i bɛ se ka premade components caman sɔrɔ ɛntɛrinɛti kan. I bɛ se ka ninnu dɔ la kelen kopi kɛ ka kɛɲɛ ni i yɛrɛ ka siti ye.

CSS bɛ Se ka Yɛlɛma cogo min na ka Kɛ Tailwind CSS ye

Ka se ka CSS sɛmɛntiya ka kɛ Tailwind CSS kalanw ye, o ye fɛn ye min mago bɛ a dilannikɛlaw fanba la. Siti caman bɛ ɛntɛrinɛti kan minnu jɔra ka kɔn Tailwind CSS ɲɛ. O ɛntɛrinɛti yɔrɔw bɛ baara kɛ ni css ye ni stylesheet ye ani ɛntɛrinɛti yiriwali baarakɛlaw b’a fɛ ka nin ɲɛ ninnu wuli ka taa Tailwind CSS kɔnɔ.

DivMagic ye ɛntɛrinɛti yiriwali baarakɛminɛn ye min jɔra ɛntɛrinɛti dilannikɛlaw ni porozɛw dilannikɛlaw ye. A b’a To cogoya o cogoya bɛ Se ka kopi Kɛ ka Bɔ vanilla css la ka Taa Tailwind CSS la. Ni i ye i digi siɲɛ kelen, i bɛ se ka ɛntɛrinɛti yɔrɔ o yɔrɔ sɛmɛntiya ka kɛ Tailwind CSS ye ani ka baara kɛ ni Tailwind ye i ka porozɛ kɔnɔ ani ka cogoya sɛmɛntiya i b’a fɛ cogo o cogo.

Aw ye aw yɛrɛ su ji la ka taa Tailwind CSS Philosophy kɔnɔ

Tailwind CSS kɔfɛ hakilina ye ka sinsin nafa sɔrɔli kan. O kɔrɔ ye ko sanni i ka component classes (dakunw) ɲɛfɔ ka kɔn, Tailwind CSS bɛ nafama-klasiw di minnu bɛ se ka kɛ sababu ye ka dilan kɛrɛnkɛrɛnnenw dilan k’a sɔrɔ i ma bɔ i ka HTML la.

Mun na an ka kan ka bɔ laadala CSS la?

CSS laadalata bɛ se ka kɛ sababu ye ka baara kɛ kojugu ni fɛnw ye minnu bɛ se ka wuli, ka dosiyew funfun, ani ‘div soup’. Ni i y’i Yɛlɛma ka Taa nafama-fɔlɔ CSS karamɔgɔya la i n’a fɔ Tailwind CSS, i bɛ Se k’o ko ninnu nɔgɔya, o bɛ Nà ni kodɔn-yɔrɔ saniyalen ye, min bɛ nɔgɔya.

Aw ye nafa sɔrɔli kalanw fanga dɔn

Utility classes b’i dɛmɛ i kana segin o cogoya kelenw kan i ka stylesheets bɛɛ kɔnɔ. O ye sariyakolo ye min tɔgɔ ye ko "Kana segin i yɛrɛ kan" (DRY). O kalanw bɛ waati ni cɛsiri caman kisi i ma, wa u bɛ na ni kodebase ye min bɛ se ka ladon kosɛbɛ.

Tailwind CSS Directives sɛgɛsɛgɛli

Tailwind CSS bɛ cikan damadɔw Lase minnu bɛ Se ka Kɛ i ka cogoya-sɛbɛnw kɔnɔ. Olu ye @apply , @variants , ani @screen ye. Nin cikan ninnu faamuyali n’u baara bɛ se ka dɔ fara i ka Tailwind CSS dɔnniya kan kosɛbɛ. Olu bɛ Se ka Blà Tailwind Config CSS file kɔnɔ. Aw bɛ se ka css kalanw sɛbɛn ni nin fɛɛrɛ in ye.

Tailwind CSS janya ni Plugins ye

Tailwind CSS bɛ se ka bonya ni plugins ye, ka baarakɛcogo kura fara a kan walima ka min bɛ yen, o bɛ se ka kɛ ka kɛɲɛ ni a yɛrɛ sago ye. Aw ye a dɔn cogo min na aw bɛ se ka baara kɛ ni plugins ye walasa ka aw ka ɛntɛrinɛti porozɛw ka baarakɛcogo ɲuman n’u cɛɲi caya.

Tailwind CSS don i ka baarakɛcogo la

Tailwind CSS donni i ka yiriwali baarakɛcogo la, o ye ko tilennen ye, i n’a fɔ i bɛ baara kɛ ni jɔli baarakɛminɛnw ye i n’a fɔ Webpack walima Parcel, walima i bɛ baara kɛ ni frameworkw ye i n’a fɔ Next.js walima Gatsby.

Ka Se sɔrɔli yiriwa ni Tailwind CSS ye

Tailwind CSS bɛ dusu don dilancogo la min bɛ se ka sɔrɔ, a kɛtɔ ka ARIA ka fɛn caman don a ka kalansow kɔnɔ. Aw ye fɛnw dilan minnu bɛ se ka sɔrɔ kosɛbɛ ani ka baarakɛlaw ka baarakɛcogo ɲɛ bɛɛ ye.

Flexbox ni Grid fanga baara ni Tailwind CSS ye

Aw bɛ bi CSS labɛncogo moduluw nafa i n’a fɔ Flexbox ani Grid ni Tailwind CSS ye. Aw ye a dɔn cogo min na nafalanw bɛ se ka baara kɛ ni u ye walasa ka layidu tacogo kɔlɔsi cogo la min bɛ se ka sɛgɛsɛgɛ ani ka jaabi di.

I ka Tailwind CSS porozew debug cogo

Tailwind CSS bɛ debugging baarakɛminɛn ni fɛɛrɛ caman Di minnu bɛ styling koɲɛw dɔnni n’u ɲɛnabɔli nɔgɔya. Aw ye nin baarakɛminɛn ninnu faamuya ani ka dɔ fara aw ka debugging seko kan.

Aw ye Web Kulɛrilen dɔ Dabɔ ni Tailwind CSS ye

Tailwind CSS bɛ na ni kulɛri caman ye minnu bɛ se ka ladilan. Aw ye baara kɛ ni o kulɛriw ye cogo min na ani k’u kɛ ka kɛɲɛ ni aw yɛrɛ sago ye walasa ka dilancogo ɲɛnamaw dilan ani minnu bɛ mɔgɔ ɲɛnajɛ.

Yiriwali teliya la ni Tailwind CSS ka JIT Mode ye

Aw ye aw yɛrɛ sɛgɛsɛgɛ ka taa a fɛ Tailwind CSS ka Just-In-Time cogoya la. A baaracogo faamuya ani a bɛ se ka i ka yiriwali teliya kosɛbɛ ani ka waatiw jɔ cogo min na.

Ka Bɔ Zero la ka Taa Hero la: Master Tailwind CSS

Aw ye taama dɔ daminɛ walasa ka Tailwind CSS dɔn kosɛbɛ. K’a ta i ka sigida sigili la ka se barokun kɔrɔw sɛgɛsɛgɛli ma, nin gafe in ye i ɲɛfɔ.

Tailwind CSS labɛn ka kɛɲɛ ni i magow ye

Tailwind CSS fanga belebele dɔ ye a ka fɛn caman sɛgɛsɛgɛli ye. Aw ye Tailwind labɛncogo dɔn walasa ka bɛn aw ka poroze mago kɛrɛnkɛrɛnnenw ma.

Boloci sɔrɔli ni Tailwind CSS ye

Aw ye aw sen don bololabaara kalan na misali nafama dɔw sababu fɛ. Aw ye ɛntɛrinɛti yɔrɔ suguya caman jɔcogo sɛgɛsɛgɛ ni Tailwind CSS ani DaisyUI ye.

Ka bɔ CSS Framework wɛrɛw la ka taa Tailwind CSS la

Aw bɛ ka jateminɛ kɛ ka wuli ka taa Tailwind CSS la wa? Danfara jɔnjɔn minnu bɛ Tailwind ni sigida wɛrɛw cɛ, aw ye olu faamu, ani ka fɛɛrɛ ɲumanw dege walasa ka aw ka porozɛw jiginni kɛ.

Aw bɛ se ka baara kɛ ni DivMagic walima o ɲɔgɔnna baarakɛminɛnw ye walasa ka dɔ fara aw ka jiginni teliya kan kosɛbɛ.

Ɛntɛrinɛti yiriwali baarakɛminɛnw i n’a fɔ DivMagic b’a To i bɛ Se ka fɛn o fɛn kopi Kɛ dilancogo o dilancogo la ani cogoya o cogoya la ka Bɔ siti o siti kan ni digi kelen ye.

Misali nɔgɔman dɔ: Karti jaabi yɔrɔ dɔ jɔli

Nin ye misali ye i bɛ se ka jaabi karti yɔrɔ dɔ jɔ cogo min na ni Tailwind CSS ye. Ja, tɔgɔ ani ɲɛfɔli bɛna kɛ nin yɔrɔ in na.

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

Formulaire dɔ jɔli ni Tailwind CSS ye

Foroko dɔ dabɔli ni Tailwind CSS ye, o ye ko tilennen ye wa a bɛ se ka faamuya. Nin ye kunnafonisɛbɛn nɔgɔman ye:

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

Tailwind CSS b’a To i b’a ka labɛncogo kɔrɔw Labɛn, ka nafamafɛnw kalasiw bɛrɛbɛn ka Kɛɲɛ n’i magow ye. Jiginni na, misali dɔ bɛ yen min b’a jira ko kulɛriw bɛ se ka kɛ cogo min na.

Nin misali ninnu bɛ Tailwind CSS ka sɛgɛsɛgɛli n’a nɔgɔya jira, k’a jira cogo min na u bɛ se k’aw dɛmɛ ka bi, jaabiw di ɛntɛrinɛti yɔrɔw dilan ka ɲɛ ani ka ɲɛ.

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#243c5a',
        'custom-green': '#387c6d',
      }
    }
  }
}

Yala ne mago bɛ CSS file dɔ la wa?

I mago bɛ filen kelen min na ni Tailwind CSS ye, o ye tailwind.config.js file ye.

O dosiye bɛna i ka labɛncogo ɲɛnabɔ. I tɛna css sɛbɛn walima ka css file wɛrɛ sɔrɔ. Nin configuration file in kelenpe de bɛna kɛ i mago ye.

Tailwind CSS ka wale ɲumanw ye jumɛnw ye?

Walasa ka ɲɛfɔli caman sɔrɔ Tailwind CSS kɛcogo ɲumanw kan, aw bɛ se k’an ka barokun wɛrɛ lajɛ Tailwind CSS kɛcogo ɲumanw kan.

Tailwind CSS: Web Design ka siniɲɛsigi

Aw ye miiri Tailwind CSS bɛ ka ɛntɛrinɛti dilanni siniɲɛsigi labɛn cogo min na. Aw ye a dɔn a nɔfɛkow n’a seko kan ka bonya ɛntɛrinɛti yiriwali baara la.