Fomba fanao tsara indrindra amin'ny Tailwind - Torolàlana farany ho an'ny CSS Tailwind

Raha ny momba ny fampiharana CSS-voalohany dia lasa vahaolana ho an'ny mpamorona maro ny Tailwind CSS.

Ny fahafaha-mamokatra, ny vokatra ary ny fanamorana ny fampiasana atolony dia voaporofo fa tena ilaina amin'ny fampivoarana tranonkala maoderina.

Na izany aza, toy ny fitaovana rehetra, mba hahazoana tombony betsaka amin'izany, dia zava-dehibe ny mahatakatra sy mampihatra ny fomba fanao tsara indrindra Tailwind CSS.

Andeha hojerentsika ny sasany amin'ireo teknika ireo.

1. Utility-First Fundamentals

Ny filôzôfian'ny utility-voalohany no fitsipika fototry ny Tailwind CSS, mikendry ny hanome hery ny mpamorona amin'ny kilasy fampiasa ambany kokoa fa tsy singa efa nomanina mialoha. Ity fomba fiasa ity dia mety ho toa manahiran-tsaina amin'ny voalohany noho ny fitenin'ny HTML anao; na izany aza, rehefa takatra izany, dia afaka manao prototyping haingana sy fanamboarana amin'ny ambaratonga famokarana.

Ao amin'ny maritrano voalohany ampiasaina, ny kilasy tsirairay dia mifanitsy amin'ny toetra mampiavaka manokana. Ohatra, ny kilasin'ny text-centre dia hampifanaraka ny lahatsoratrao amin'ny afovoany, raha ny bg-blue-500 kosa dia hanome ny singanao alokaloka manga manokana.

Ity fomba fiasa ity dia mampiroborobo ny famerenana ny singa ary mampihena ny habetsaky ny CSS soratanao, manafoana ireo olana mahazatra toy ny ady manokana sy ny fanafoanana ny kaody maty.

2. Famolavolana mamaly

Ny Tailwind CSS koa dia tsara indrindra amin'ny famolavolana mamaly. Mampiasa rafitra fiatoana voalohany amin'ny finday izy io, midika izany fa ny fomba ampiharina amin'ny efijery kely kokoa dia mora mivadika ho lehibe kokoa. Azo atao izany amin'ny alàlan'ny prefix tsotra toy ny sm:, md:, lg:, ary xl: alohan'ny kilasinao.

Ohatra, ny md:text-center dia tsy hampihatra afa-tsy ny kilasin'ny text-center amin'ny efijery antonony sy lehibe kokoa. Izany dia ahafahanao mamolavola intuitive ho an'ny haben'ny efijery isan-karazany, mahatonga ny famolavolana mandray andraikitra ho mora amin'ny Tailwind.

3. Fampiasana fomba indray

Na dia mamporisika ny fampiasana fomba mivantana amin'ny HTML anao aza ny utility-voalohany, dia mety ho sarotra ny famerimberenana ny fampifangaroana fitaovana be pitsiny. Eto, ny toromarika @apply an'i Tailwind dia lasa mpamonjy aina, mamela anao hanesorana ireo fomba miverimberina ao amin'ny kilasy CSS mahazatra.

Ohatra, raha mampiasa matetika ny fitambaran'ny bg-red-500 text-white p-6 ianao dia afaka mamorona kilasy vaovao toy ny .error ary mampiasa @apply mba hampiasana indray ireo fomba ireo. Izany dia manatsara ny fahaiza-mamaky ny code sy ny fikojakojana.

4. Fanampiana fomba fanao

Na dia tonga miaraka amin'ny kilasy fampitaovana maro aza ny Tailwind CSS, dia mety mila fomba fanao manokana ianao ho an'ny fepetra manokana. Tailwind dia manolotra safidy fanamboarana be dia be amin'ny alàlan'ny fisieny, tailwind.config.js.

Azonao atao ny manitatra ny fanamafisam-peo mahazatra, mamorona loko mahazatra, teboka tapaka, endri-tsoratra, sy ny maro hafa. Zava-dehibe anefa ny fampiasana kely ity fampiasa ity mba hisorohana ny fikorianan'ny rakitrao.

5. Asa & torolalana

Ny Tailwind CSS dia manome fiasa sy torolalana maromaro mba hanamora ny traikefanao amin'ny fampandrosoana. Ohatra, ny asa theme() dia ahafahanao miditra mivantana amin'ny sandan'ny fandrindrana anao ao amin'ny CSS-nao, manamora ny famolavolana mavitrika.

Ambonin'izany, ny torolalan'i Tailwind, toy ny @responsive, @variants, ary @apply, dia mamela anao hamokatra karazany miverimberina sy miverimberina. Ny fampiasana ireo fiasa sy torolalana ireo dia hanafaingana ny fizotran'ny fivoaranao ary hitazona ny codebase ho voalamina.

6. Fikarakarana Hover, Focus, ary Fanjakana hafa

Faritra iray hafa izay mamiratra ny Tailwind CSS dia mitantana fanjakana singa samihafa. Ny fampiharana ny fomba amin'ny hover, mifantoka, mavitrika, ary fanjakana hafa dia tsotra toy ny fametrahana ny kilasin'ny fitaovana miaraka amin'ny anaran'ny fanjakana.

Ohatra, hover:bg-blue-500 dia hampihatra ny kilasy bg-blue-500 rehefa mihodinkodina ny singa. Ireo prefix ireo dia manome fifehezana avo lenta amin'ny fihetsiky ny singa amin'ny fanjakana samihafa, manatsara ny traikefan'ny mpampiasa ny tranokalanao.

Ho fehin-kevitra, ny fifehezana ireo fomba fanao tsara indrindra Tailwind CSS ireo dia afaka manatsara ny fizotran'ny fampivoarana tranonkalanao. Fomba fiasa voalohany, rehefa atambatra amin'ny fampiasana fomba mahomby, fanamboarana ary tanana tsara

Hatsarao ny lalan'ny Tailwind CSS amin'ny DivMagic

Raha mikasa ny hanatsara ny fizotran'ny Tailwind CSS ianao dia jereo ny DivMagic, fanitarana navigateur izay ahafahanao mandika sy mamadika mivantana ny kilasy CSS Tailwind avy amin'ny navigateur ary miasa amin'ny tranokala rehetra.

Chrome:Apetraho ho an'ny Chrome

Firefox:Mametraka ho an'ny Firefox

Nahazo valiny sa olana? Ampahafantaro anay amin'ny alàlan'ny lampihazonay, dia hokarakarainay ny ambiny!