Mekgwa ye Mebotse ya Tailwind - Tlhahlo ya Mafelelo ya Tailwind CSS

Ge go tliwa go phethagatša CSS ya pele ya utility, Tailwind CSS e fetogile tharollo ya go ya go bahlami ba bantši.

Go fetofetoga le maemo, tšweletšo le bonolo bja tšhomišo bjo e bo fago di ipontšhitše e le tša bohlokwa kudu tlhabollong ya sebjalebjale ya wepe.

Le ge go le bjalo, go swana le sedirišwa sefe goba sefe, go hwetša mohola o mogolo go yona, go bohlokwa go kwešiša le go diriša mekgwa ye mebotse ya Tailwind CSS.

A re itahleng ka gare ga tše dingwe tša dithekniki tše.

1. Dilo tša Motheo tša Utility-Pele

Filosofi ya utility-pele ke molaotheo wa motheo wa Tailwind CSS, yeo e ikemišeditšego go matlafatša bahlami ka diklase tša utility tša maemo a tlase go e na le dikarolo tšeo di hlamilwego pele. Mokgwa wo mathomong o ka bonagala o boifiša ka lebaka la go ba le mantšu a mantši ga HTML ya gago; le ge go le bjalo, ge e šetše e kwešišitšwe, e kgontšha go dira diprototype ka lebelo le go dira gore dilo di be ka mokgwa wa maemo a tšweletšo.

Ka go mohlwaela wa utility-pele, sehlopha se sengwe le se sengwe se sepelelana le seka se se itšego sa setaele. Go fa mohlala, sehlopha sa sengwalwa-gare se tla logaganya sengwalwa sa gago go bogareng, mola bg-blue-500 e tla fa elemente ya gago moriti wo o itšego wa bokamorago bjo botalalerata.

Mokgwa wo o kgothaletša go šomišwa gape ga dikarolo gomme o fokotša palo ya CSS yeo o e ngwalago, o fediša ditaba tše di tlwaelegilego tša go swana le dintwa tša go kgethegile le go fedišwa ga khoutu ye e hwilego.

2. Moralo o arabelang

Tailwind CSS le yona e phala ka moralo o arabelang. E šomiša tshepedišo ya go kgaotša pele ka sellathekeng, go ra gore mekgwa yeo e dirišitšwego go diskrini tše nnyane e ka cascade gabonolo go ya go tše kgolo. Se se ka dirwa ka go šomiša dihlongwapele tše bonolo tša go swana le sm:, md:, lg:, le xl: pele ga diklase tša gago tša utility.

Go fa mohlala, md:text-center e tla diriša fela sehlopha sa text-center go diskrini tša magareng le tše kgolo. Se se go dumelela go hlama ka tsela ye e kwešišegago bakeng sa bogolo bja skrine bjo bo fapanego, go dira gore tlhamo ye e arabelago e be phefo ye e fokago ka Tailwind.

3. Go šomiša gape Ditaele

Le ge utility-first e hlohleletša go diriša ditaele thwii go HTML ya gago, go boeletša metswako ye e raraganego ya utilities e ka ba ye boima. Mo, Tailwind’s @apply directive e ba mophološi wa bophelo, e go dumelela go ntšha ditaele tše di boeletšwago ka gare ga diklase tša CSS tša tlwaelo.

Go fa mohlala, ge o šomiša kgafetšakgafetša kopanyo ya bg-red-500 text-white p-6, o ka hlama sehlopha se sefsa go swana le .error gomme wa šomiša @apply go šomiša gape ditaele tše. Se se godiša go balwa ga khoutu le go hlokomelwa.

4. Go tlaleletša Ditaele tša Tlwaelo

Le ge Tailwind CSS e tla le lenaneo le legolo la diklase tša mohola, o ka nyaka ditaele tša tlwaelo bakeng sa dinyakwa tše itšego. Tailwind e fana ka dikgetho tše di nabilego tša go ikgethela ka faele ya yona ya peakanyo, tailwind.config.js.

O ka atološa peakanyo ya maitirelo, wa hlama mebala ya tlwaelo, dintlha tša go kgaotša, difonte, le tše dingwe. Go bohlokwa, le ge go le bjalo, go šomiša tšobotsi ye ka go se nene go thibela go budulela faele ya gago ya peakanyo.

5. Mešomo & Ditaelo

Tailwind CSS e fana ka mešomo ye mmalwa le ditaelo go dira gore maitemogelo a gago a tlhabollo a be boreledi. Go fa mohlala, mošomo wa sehlogo () o go dumelela go fihlelela dikelo tša gago tša peakanyo thwii ka go CSS ya gago, go nolofatša setaele sa go fetoga.

Go feta fao, ditaelo tša Tailwind’s, go swana le @responsive, @variants, le @apply, di go dumelela go tšweletša diphetogo tše di arabelago, tša mmušo, le go ntšha ditaele tše di boeletšwago, ka go latelelana. Go šomiša mešomo ye le ditaelo ka tshwanelo go tla akgofiša tshepedišo ya gago ya tlhabollo le go boloka codebase ya gago e rulagantšwe.

6. Go Swara Hover, Focus, le Maemo a Mangwe

Lefelo le lengwe leo Tailwind CSS e phadimago go lona ke go swara maemo a elemente a go fapana. Go diriša mekgwa go hover, focus, active, le maemo a mangwe go bonolo go swana le go bea pele sehlopha sa utility ka leina la mmušo.

Ka mohlala, hover:bg-blue-500 e tla diriša sehlopha sa bg-blue-500 ge elemente e bewa godimo. Dihlongwapele tše di fa maemo a godimo a taolo ya ka fao dielemente di itshwarago ka gona maemong a go fapana, go godiša maitemogelo a modiriši a sebaka sa gago.

Ge re phetha, go tseba mekgwa ye mebotse ya Tailwind CSS gabotse go ka godiša kudu tshepedišo ya gago ya tlhabollo ya wepe. Mokgwa wa utility-pele, ge o kopantšwe le tšhomišo gape ye e atlegago ya mekgwa, diphetogo tša go ikgetha le go šomiša diatla gabotse

Kaonafatša tshepedišo ya gago ya mošomo ya Tailwind CSS ka DivMagic

Ge e le gore o nyaka go kaonafatša tshepedišo ya gago ya mošomo ya Tailwind CSS, hlahloba DivMagic, katoloso ya sephephediši yeo e go dumelelago go kopiša le go fetolela diklase tša Tailwind CSS thwii go tšwa go sephephediši sa gago gomme e šoma wepsaeteng efe goba efe.

Chrome:Kenya bakeng sa Chrome

Firefox:Tsenya bakeng sa Firefox

O hweditše ditshwayotshwayo goba taba? Re tsebiše ka sefala sa rena, gomme re tla swara tše dingwe!