Tailwind ka wale ɲumanw - Gafe laban min bɛ Tailwind CSS kan

Ni a bɛ na ni CSS nafama-fɔlɔ waleyali ye, Tailwind CSS kɛra taa-ka-segin fura ye baarakɛla caman bolo.

A bɛ fɛn caman sɛmɛntiya, a bɛ se ka baara kɛ cogo min na, ani a bɛ baara nɔgɔya cogo min na, o y’a jira ko nafa ka bon bi ɛntɛrinɛti yiriwali la.

Nka, i n’a fɔ baarakɛminɛn tɔw bɛɛ, walasa ka nafa caman sɔrɔ a la, a nafa ka bon kosɛbɛ ka Tailwind CSS kɛcogo ɲumanw faamuya ani k’u waleya.

An ka an yɛrɛ Dòn o fɛɛrɛ dɔw la.

1. Nafa-fɔlɔ jɔnjɔnw

Nafa-fɔlɔ hakilila ye Tailwind CSS sariyakolo jɔnjɔn ye, min laɲini ye ka fanga di baarakɛlaw ma ni nafabɔ-klasiw ye minnu ka dɔgɔ sanni ka kɛ yɔrɔw ye minnu dilannen don ka kɔn. O fɛɛrɛ in bɛ Se ka Kɛ a daminɛ na i n’a fɔ a bɛ mɔgɔ siran k’a sababu Kɛ i ka HTML ka kuma fɔcogo ye; nka, n’a faamuyara, a bɛ kɛ sababu ye ka prototyping teliya ani ka fɛn dilanni hakɛ ladamuni kɛ.

Nafa-fɔlɔ architecture kɔnɔ, kalasi kelen-kelen bɛɛ bɛ bɛn cogoya kɛrɛnkɛrɛnnen dɔ ma. Misali la, sɛbɛnni-cɛmancɛ-klasi bɛna i ka sɛbɛnniw Labɛn ni cɛmancɛ ye, k’a sɔrɔ bg-blue-500 bɛna i ka fɛnɲɛnɛma-yɔrɔ bulu kɛrɛnkɛrɛnnen dɔ Di i ma.

O fɛɛrɛ in bɛ yɔrɔw baaracogo kura sabati ani ka dɔ bɔ CSS hakɛ la i bɛ min sɛbɛn, ka ko minnu bɛ kɛ tuma caman na i n’a fɔ kɛrɛnkɛrɛnnenya kɛlɛw ani kode salenw bɔli.

2. Jaabiw Dilancogo

Tailwind CSS fana ka fisa ni jaabi dilancogo ye. A bɛ baara Kɛ ni mobili-first breakpoint system ye, o kɔrɔ ye ko cogoya minnu bɛ Kɛ ɛkran misɛnninw kan, olu bɛ Se ka Kɛ nɔgɔya la ka Taa ɛkran belebelebaw la. O bɛ Se ka Kɛ ni daɲɛ fɔlɔ nɔgɔmanw ye i n’a fɔ sm:, md:, lg:, ani xl: ka kɔn i ka nafabɔ-klasiw ɲɛ.

Misali la, md:text-center bɛna text-center kalasi baara kɛ dɔrɔn ekran cɛmancɛw ni ekran belebelebaw kan. O b’a to i bɛ se ka dilan kɛ cogo la min bɛ se ka faamuya ka kɛɲɛ ni ɛkran hakɛ danfaralenw ye, o bɛ kɛ sababu ye ka dilancogo jaabilen kɛ fiɲɛ ye ni Tailwind ye.

3. Ka baara kɛ ni Styles ye kokura

Hali ni utility-first bɛ dusu don i kɔnɔ i ka cogoyaw waleya i ka HTML kan k’a ɲɛsin i yɛrɛ ma, ka segin nafamafɛnw faralen ɲɔgɔn kan cogo gɛlɛnw kan, o bɛ se ka kɛ gɛlɛya ye. Yan, Tailwind ka @apply cikan bɛ kɛ ɲɛnamaya kisilan ye, min b’a to i bɛ se ka segin-ka-bɔnyew bɔ CSS kalanw kɔnɔ minnu bɛ kɛ ka kɛɲɛ ni i yɛrɛ sago ye.

Misali la, n’i bɛ to ka baara Kɛ ni bg-red-500 text-white p-6 faralen ye ɲɔgɔn kan, i bɛ Se ka kalasi kura Dabɔ i n’a fɔ .error ani ka baara Kɛ ni @apply ye walasa ka baara Kɛ ni nin cogoyaw ye kokura. O bɛ dɔ fara kode kalanni ni a ladonni kan.

4. Ka Ladamucogo Ladamulenw Fàra ɲɔgɔn kan

Hali ni Tailwind CSS bɛ na ni nafalan suguya caman ye, i bɛ se ka mago don cogoya ladamulenw na wajibi kɛrɛnkɛrɛnnenw kama. Tailwind bɛ ladamuni sugandi caman Di a ka labɛnni-dosiyɛri fɛ, n’o ye tailwind.config.js ye.

I bɛ se ka labɛncogo kɔrɔ janya, ka kulɛriw, kariyɔrɔw, sɛbɛnnibolow ani fɛn wɛrɛw dilan minnu bɛ kɛ ka kɛɲɛ ni i yɛrɛ sago ye. Nka, a nafa ka bon ka baara kɛ ni nin fɛɛrɛ in ye dɔɔnin dɔɔnin walasa k’i ka labɛnni-dosiyɛri funu bali.

5. Baarakɛcogo & Ladilikanw

Tailwind CSS bɛ baarakɛcogo ni cikan caman di walasa k’i ka yiriwali kɛcogo nɔgɔya. Misali la, theme() baarakɛcogo b’a To i bɛ Se k’i ka labɛnni nafaw Sɔrɔ k’a ɲɛsin i ka CSS ma, o bɛ dynamique styling nɔgɔya.

Ka fara o kan, Tailwind ka cikanw, i n’a fɔ @responsive, @variants ani @apply, olu b’a To i bɛ se ka jaabiw, state variants (fɔcogo caman fɔcogo) Bɔ, ani ka cogoya segin-seginlenw Bɔ, u kelen-kelen bɛɛ. Baara kɛli ni o baarakɛcogo ni cikanw ye cogo bɛnnen na, o bɛna i ka yiriwali baara teliya ani k’i ka kodebase labɛn.

6. Hover, Focus ani jamana wɛrɛw minɛcogo

Tailwind CSS bɛ yeelen bɔ yɔrɔ wɛrɛ min na, o ye elementi cogoya wɛrɛw ɲɛnabɔli ye. Styles (cogoyaw) waleyali hover, focus, active ani state wɛrɛw kan, o ka nɔgɔn i n’a fɔ ka utility class (nafama-klasi) ɲɛfɛ ni state tɔgɔ ye.

Misali la, hover:bg-blue-500 bɛna bg-blue-500 kalasi waleya ni element in bɛ hover sanfɛ. O dakun fɔlɔw bɛ se ka kɔrɔsiliba Di fɛnw bɛ taama cogo min na jamana wɛrɛw la, o bɛ dɔ Fàra i ka yɔrɔ in baarakɛcogo kan.

Kuncɛli la, ka nin Tailwind CSS kɛcogo ɲumanw dɔn, o bɛ se ka dɔ fara i ka ɛntɛrinɛti yiriwali taabolo kan kosɛbɛ. Nafa-fɔlɔ fɛɛrɛ, n’a farala ɲɔgɔn kan ni baara kɛcogo ɲuman ye ni cogoyaw ye, ka kɛɲɛ ni mɔgɔw sago ye, ani ni bolo ɲuman ye

Aw ye aw ka Tailwind CSS baarakɛcogo ɲɛ ni DivMagic ye

N’i b’a fɛ k’i ka Tailwind CSS baarakɛcogo ɲɛ, i ka DivMagic lajɛ, n’o ye navigatɔrɔn ye min b’a to i bɛ se ka Tailwind CSS kalanw kopi kɛ k’u sɛmɛntiya ka bɔ i ka navigatɔrɔ la k’a ɲɛsin i ma ani a bɛ baara kɛ siti o siti kan.

Chrome:Install for Chrome

Firefox:Install for Firefox

Aw ye hakilina sɔrɔ walima ko dɔ? An k’a dɔn an ka plateforme fɛ, an bɛna tɔw ɲɛnabɔ!