ʻO nā hoʻomaʻamaʻa maikaʻi loa ʻo Tailwind - Ke alakaʻi hope loa no Tailwind CSS

I ka hiki ʻana mai i ka hoʻokō ʻana i ka CSS pono-mua, ua lilo ʻo Tailwind CSS i mea hoʻonā no nā mea hoʻomohala he nui.

ʻO ka maʻalahi, ka huahana, a me ka maʻalahi o ka hoʻohana ʻana i hāʻawi ʻia i mea waiwai nui i ka hoʻomohala pūnaewele hou.

Eia nō naʻe, e like me kekahi mea hana, no ka loaʻa ʻana o ka mea nui, he mea koʻikoʻi ia e hoʻomaopopo a hoʻopili i nā hana maikaʻi loa o Tailwind CSS.

E luʻu kākou i kekahi o kēia mau ʻenehana.

1. Utility-First Fundamentals

ʻO ka philosophy utility-first ke kumu kumu o Tailwind CSS, e manaʻo ana e hoʻoikaika i nā mea hoʻomohala me nā papa haʻahaʻa haʻahaʻa ma mua o nā mea i hoʻolālā mua ʻia. Hiki i kēia ala ke ʻike mua i ka hopohopo ma muli o ka verbosity o kāu HTML; akā naʻe, ke hoʻomaopopo ʻia, hiki iā ia ke hana prototyping wikiwiki a me ka hoʻoponopono pae hana.

I loko o kahi hoʻolālā pono-mua, pili kēlā me kēia papa i kahi ʻano ʻano kikoʻī. No ka laʻana, e hoʻolikelike ka papa kikokikona-waena i kāu kikokikona i ke kikowaena, aʻo bg-blue-500 e hāʻawi i kāu mea i kahi pale kikoʻī o ka polū.

Hoʻoikaika kēia ala i ka hoʻohana hou ʻana o ka mea a hoʻemi i ka nui o CSS āu e kākau ai, e hoʻopau ana i nā pilikia maʻamau e like me nā kaua kikoʻī a me ka hoʻopau ʻana i nā code make.

2. Hoʻolālā pane

ʻOi aku ka Tailwind CSS i ka hoʻolālā pane. Hoʻohana ʻo ia i kahi ʻōnaehana breakpoint mobile-first, ʻo ia hoʻi nā ʻano i hoʻohana ʻia i nā pale liʻiliʻi hiki ke maʻalahi i nā pale nui. Hiki ke hana i kēia me ka hoʻohana ʻana i nā prefix maʻalahi e like me sm:, md:, lg:, a me xl: ma mua o kāu mau papa pono.

No ka laʻana, ʻo ka md:text-center e hoʻohana wale i ka papa kikokikona ma nā ʻaoʻao waena a me ka nui. Hāʻawi kēia iā ʻoe e hoʻolālā intuitively no nā ʻano nui o ka pale, e hana i ka hoʻolālā pane i ka makani me Tailwind.

3. Hoʻohana hou i nā ʻano

ʻOiai e paipai ana ka pono-mua i ka hoʻopili pololei ʻana i nā ʻano i kāu HTML, hiki ke paʻakikī ka hana hou ʻana i ka hui pū ʻana o nā pono hana. Ma ʻaneʻi, lilo ʻo Tailwind's @apply i mea mālama ola, e ʻae iā ʻoe e unuhi i nā ʻano hou i nā papa CSS maʻamau.

No ka laʻana, inā hoʻohana pinepine ʻoe i ka hui ʻana o bg-red-500 kikokikona-keʻokeʻo p-6, hiki iā ʻoe ke hana i kahi papa hou e like me .error a hoʻohana i ka @apply e hoʻohana hou i kēia mau ʻano. Hoʻonui kēia i ka heluhelu a me ka mālama ʻana i nā code.

4. Hoʻohui i nā Kāhua Kuʻuna

ʻOiai ke hele mai nei ʻo Tailwind CSS me kahi ākea o nā papa pono, pono paha ʻoe i nā ʻano maʻamau no nā koi kikoʻī. Hāʻawi ʻo Tailwind i nā koho hana maʻamau ma o kāna faila hoʻonohonoho, tailwind.config.js.

Hiki iā ʻoe ke hoʻonui i ka hoʻonohonoho paʻamau, ka hana ʻana i nā kala maʻamau, breakpoints, fonts, a me nā mea hou aku. He mea nui naʻe, e hoʻohana liʻiliʻi i kēia hiʻohiʻona e pale ai i ka hoʻoulu ʻana i kāu faila hoʻonohonoho.

5. Nā hana a me nā kuhikuhi

Hāʻawi ʻo Tailwind CSS i nā hana a me nā kuhikuhi e hoʻomaʻamaʻa i kāu ʻike hoʻomohala. No ka laʻana, hiki i ka hana theme() ke komo pololei i kāu mau waiwai hoʻonohonoho i kāu CSS, e hoʻomaʻamaʻa i ke ʻano hoʻoikaika.

Eia kekahi, ʻo nā kuhikuhi a Tailwind, e like me @responsive, @variants, a me @apply, e ʻae iā ʻoe e hana i ka pane ʻana, nā ʻano mokuʻāina, a me ka unuhi ʻana i nā ʻano hana hou, kēlā me kēia. ʻO ka hoʻohana pono ʻana i kēia mau hana a me nā kuhikuhi e hoʻolōʻihi i kāu kaʻina hoʻomohala a mālama i kāu codebase.

6. Ka Hover, Focus, and Other States

ʻO kahi ʻē aʻe kahi e ʻālohilohi ai ʻo Tailwind CSS e lawelawe ana i nā mokuʻāina ʻokoʻa. ʻO ka hoʻohana ʻana i nā ʻano ma ka hover, focus, active, a me nā mokuʻāina ʻē aʻe he mea maʻalahi e like me ka prefixing i ka papa pono me ka inoa mokuʻāina.

No ka laʻana, hover:bg-blue-500 e hoʻohana i ka papa bg-blue-500 ke kau ʻia ka mea. Hāʻawi kēia mau prefix i kahi kiʻekiʻe o ka mana ma luna o ka hana ʻana o nā mea i nā mokuʻāina like ʻole, e hoʻonui ana i ka ʻike mea hoʻohana o kāu pūnaewele.

I ka hopena, ʻo ka haku ʻana i kēia mau hana maikaʻi loa ʻo Tailwind CSS hiki ke hoʻonui nui i kāu kaʻina hana hoʻomohala pūnaewele. ʻO kahi ala pono-mua, ke hoʻohui ʻia me ka hoʻohana hou ʻana i nā ʻano, nā hana maʻamau, a me ka lima maikaʻi

E hoʻomaikaʻi i kāu kahe hana CSS Tailwind me DivMagic

Inā ʻoe e ʻimi nei e hoʻomaikaʻi i kāu kahe hana CSS Tailwind, e nānā iā DivMagic, kahi hoʻonui polokalamu e hiki ai iā ʻoe ke kope a hoʻololi i nā papa Tailwind CSS pololei mai kāu polokalamu kele pūnaewele a hana ia ma kekahi pūnaewele.

Chrome:E hoʻouka no Chrome

Firefox:E hoʻouka no Firefox

Loaʻa iā ʻoe ka manaʻo manaʻo a i ʻole ka pilikia? E haʻi mai iā mākou ma o kā mākou paepae, a e mālama mākou i ke koena!