Hababka ugu Fiican ee Dabaylaha - Hagaha ugu dambeeya ee Tailwind CSS

Marka ay timaado fulinta utility-Utility CSS, Tailwind CSS waxa ay u noqotay xal u gaar ah horumariyayaal badan.

Dabacsanaanta, wax-soo-saarka, iyo sahlanaanta isticmaalka ay bixiso waxay caddeeyeen inay qiimo weyn u leeyihiin horumarinta shabakadda casriga ah.

Si kastaba ha ahaatee, sida qalab kasta, si aad ugu faa'iidaysato, waa muhiim in la fahmo oo la dabaqo dhaqamada ugu fiican ee Tailwind CSS.

Aynu u dhex galno qaar ka mid ah farsamooyinkan.

1. Utility-Aasaaska Koowaad

Falsafada utility-koowaad waa mabda'a udub dhexaadka u ah Tailwind CSS, ujeedaduna tahay in lagu xoojiyo horumarinta fasalada tamarta hoose halkii ay ka ahaan lahaayeen qaybo horay loo qorsheeyay. Habkani wuxuu marka hore u muuqan karaa mid adag sababtoo ah hadalka HTML-kaaga; si kastaba ha ahaatee, marka la fahmo, waxay awood u si dhakhso ah u habaynta iyo heerka wax soo saarka.

Dhismaha utility-ka koowaad, fasal kastaa wuxuu u dhigmaa sifo gaar ah. Tusaale ahaan, fasalka-xarunta qoraalka ayaa toosin doona qoraalkaaga xarunta, halka bg-buluu-500 ay siin doonto curiyahaaga hadh gaar ah oo asal buluug ah.

Habkani wuxuu kor u qaadayaa dib-u-isticmaalka qaybaha wuxuuna yareynayaa cadadka CSS ee aad qorto, baabi'inta arrimaha caadiga ah sida dagaalada gaarka ah iyo tirtirida koodka dhintay.

2. Naqshad jawaab celin leh

Tailwind CSS sidoo kale waxay ku fiican tahay naqshadaynta jawaabta. Waxa ay isticmaashaa habka mobaylka-koowaad jabinta, taasoo la macno ah qaababka lagu dabaqo shaashadaha yar yar si fudud ayay ugu soo qulquli karaan kuwa waaweyn. Tan waxa lagu samayn karaa iyadoo la isticmaalayo horgalayaasha fudud sida sm:, md:, lg:, iyo xl: ka hor fasalada tamartaada.

Tusaale ahaan, md: text-center kaliya waxay dabaqi doontaa fasalka-xarunta qoraalka ee shaashadaha dhexe iyo kuwa waaweyn. Tani waxay kuu ogolaaneysaa inaad si macquul ah u naqshadeyso cabbirrada shaashadaha kala duwan, sameynta naqshad jawaab celin leh neecaw leh Tailwind.

3. Dib u Isticmaalka Hababka

Iyadoo utility-koowaad ay dhiirigelinayso ku dhaqanka qaababka si toos ah HTML kaaga, ku celcelinta isku darka kakan ee agabka ayaa noqon kara dhib. Halkan, dardaaranka Tailwind's @apply wuxuu noqdaa badbaadiye, kaas oo kuu oggolaanaya inaad soo saarto qaabab soo noqnoqda fasallada CSS ee caadada u ah.

Tusaale ahaan, haddii aad si joogto ah u isticmaashid isku darka bg-red-500 text-white p-6, waxaad abuuri kartaa fasal cusub sida .error oo isticmaal @codsi si aad dib ugu isticmaasho qaababkan. Tani waxay kor u qaadaysaa akhrinta koodka iyo joogteynta.

4. Ku darista Hababka Gaarka ah

In kasta oo Tailwind CSS ay la timaaddo fasallo kala duwan oo tasiilaad ah, waxaa laga yaabaa inaad u baahato qaabab gaar ah shuruudaha gaarka ah. Tailwind waxay bixisaa doorashooyin is-beddelid ballaaran iyada oo loo marayo faylka qaabeynta, tailwind.config.js.

Waxaad kordhin kartaa qaabka caadiga ah, abuurista midabyo gaar ah, meelaha jabinta, xarfaha, iyo in ka badan. Si kastaba ha ahaatee, waa muhiim, si kastaba ha ahaatee, inaad si taxadar leh u isticmaasho sifadan si aad uga hortagto bararka faylka qaabeynta.

5. Hawlaha & Dardaaranka

Tailwind CSS waxay ku siinaysaa dhawr hawlood iyo dardaaran si ay khibradaada horumarineed uga dhigto mid fudud. Tusaale ahaan, shaqada mawduuca() waxay kuu ogolaanaysaa inaad si toos ah u gasho qiyamkaaga qaabaynta gudaha CSS kaaga, iyada oo fududaynaysa habaynta firfircoonida.

Intaa waxaa dheer, dardaaranka Tailwind, sida @responsive, @variants, iyo @apply, waxay kuu oggolaanayaan inaad abuurto jawaab celin, kala duwanaansho dawladeed, oo aad soo saarto qaabab soo noqnoqda, siday u kala horreeyaan. Ka faa'iidaysiga hawlahan iyo dardaarannadan si ku habboon waxay soo dedejin doontaa nidaamkaaga horumarineed waxayna ilaalin doontaa habaynta lambarkaaga.

6. Wax ka qabashada Hover, Diirada, iyo Gobolada Kale

Meel kale oo ay Tailwind CSS ka iftiimayso ayaa la tacaalaysa xaalado kala duwan. Dalbashada qaababka ku saabsan dullidda, diiradda, firfircoonida, iyo gobolada kale waa mid fudud sida horgalayaasha fasalka utility ee leh magaca gobolka.

Tusaale ahaan, hover:bg-bulue-500 ayaa dabaqi doona fasalka bg-buluu-500 marka curiyaha la dulmaro. Horgalayaashani waxay bixiyaan kontorool heer sare ah oo ku saabsan sida cunsuriyadu u dhaqmaan gobollo kala duwan, iyagoo kor u qaadaya khibradda isticmaale ee boggaaga.

Gebogebadii, lahaanshaha hab-dhaqannadan ugu wanaagsan ee Tailwind CSS waxay si weyn u wanaajin kartaa habka horumarinta shabakadaada. Habka ugu horreeya ee utility, marka lagu daro dib-u-isticmaalka wax ku oolka ah ee qaababka, habaynta, iyo gacan-wanaagga

Ku wanaaji socodkaaga shaqada ee Tailwind CSS adoo isticmaalaya DivMagic

Haddii aad raadinayso inaad hagaajiso socodkaaga shaqo ee Tailwind CSS, fiiri DivMagic, kordhinta browserka kaas oo kuu ogolaanaya inaad nuqul ka sameyso oo aad ka beddesho fasalada Tailwind CSS si toos ah browserkaaga waxayna ka shaqeysaa shabakad kasta.

Chrome:Ku rakib Chrome

Firefox:Ku rakib Firefox

jawaab celin ma heshay ama arin? Nala socodsii madalkeenna, inta kalena waannu qaban doonnaa!