Tailwind ƒe React Nyuitɔwo - Mɔfiame Mamlɛtɔ na Tailwind CSS

Ne míeƒo nu tso CSS si nye utility-first zazã ŋu la, Tailwind CSS va zu egbɔkpɔnu si dzi dɔwɔla geɖewo yina.

Alesi wòte ŋu trɔna ɖe nɔnɔmewo ŋu, eƒe dɔwɔwɔ nyuie, kple eŋudɔwɔwɔ bɔbɔe la ɖee fia be exɔ asi ŋutɔ le egbegbe nyatakakadzraɖoƒewo wɔwɔ me.

Ke hã, abe dɔwɔnu ɖesiaɖe ene la, be nàkpɔ viɖe geɖe tso eme la, ele vevie ŋutɔ be nàse Tailwind CSS ƒe React nyuitɔwo gɔme ahawɔ wo ŋudɔ.

Mina míage ɖe aɖaŋu siawo dometɔ aɖewo me.

1. Viɖe Gbãtɔ ƒe Gɔmeɖosewo

Xexemenunya si nye utility-first nye gɔmeɖose vevitɔ le Tailwind CSS me, si ƒe taɖodzinue nye be yeana ŋusẽ dɔwɔlawo kple utility classes siwo le ɖoƒe si bɔbɔ ɖe akpa siwo wowɔ do ŋgɔ teƒe. Mɔnu sia ate ŋu adze nu dziŋɔ le gɔmedzedzea me le wò HTML ƒe nyagbɔgblɔwo ta; ke hã, ne wonya se egɔme ko la, enaa woate ŋu awɔ kpɔɖeŋuwo kabakaba eye woatrɔ asi le wo ŋu le alesi wowɔa woe.

Le utility-first architecture me la, klass ɖesiaɖe sɔ kple atsyã ƒe nɔnɔme aɖe koŋ. Le kpɔɖeŋu me, text-center ƒe hatsotso la ana wò nuŋɔŋlɔa nasɔ ɖe titina, esime bg-blue-500 ana wò element la nakpɔ megbe blɔ ƒe vɔvɔli tɔxɛ aɖe.

Mɔnu sia doa akpa aɖewo gbugbɔgazã ɖe ŋgɔ eye wòɖea CSS si nèŋlɔna dzi kpɔtɔna, si ɖea nya siwo bɔ abe aʋawɔwɔ tɔxɛwo kple kɔda kukuwo ɖeɖeɖa ɖa.

2. Aɖaŋu si Wowɔna Ðe Nu Ŋu

Tailwind CSS hã bi ɖe aɖaŋu si wɔa dɔ nyuie me. Ezãa asitelefon gbãtɔ ƒe breakpoint system, si fia be atsyã siwo wozãna ɖe screen suewo dzi ate ŋu atso bɔbɔe ayi screen gãwo dzi. Woateŋu awɔ esia to ŋgɔdonya bɔbɔewo abe sm:, md:, lg:, kple xl: zazã me do ŋgɔ na wò utility classes.

Le kpɔɖeŋu me, md:text-center awɔ text-center ƒe hatsotso la ŋudɔ le screen siwo le titina kple esiwo lolo wu dzi ko. Esia na be nàte ŋu awɔ aɖaŋu le mɔ si gɔme sese nu na screen ƒe lolome vovovowo, si wɔnɛ be aɖaŋuwɔwɔ si wɔa dɔ nyuie nyea yaƒoƒo kple Tailwind.

3. Atsyãwo Zazã Gbugbɔgazã

Togbɔ be utility-first dea dzi ƒo be nàzã atsyãwo tẽ ɖe wò HTML dzi hã la, utilities ƒe ƒuƒoƒo sesẽwo gbugbɔgagblɔ ate ŋu ava zu agba. Le afisia la, Tailwind’s @apply mɔfiame va zua agbeɖela, si na be nàte ŋu aɖe atsyã siwo wogbugbɔ gblɔna ɖe CSS ƒe hatsotso tɔxɛwo me.

Le kpɔɖeŋu me, ne èzãa bg-red-500 text-white p-6 ƒe ƒuƒoƒo enuenu la, àteŋu awɔ klass yeye abe .error ene eye nàzã @apply atsɔ agbugbɔ azã atsyã siawo. Esia nana be woate ŋu axlẽ kɔpiwo eye woate ŋu alé be na wo nyuie wu.

4. Atsyã Siwo Wowɔ Ðe Ðoɖo Nu Tsɔtsɔ De Eme

Togbɔ be Tailwind CSS va kple dɔwɔnu ƒe hatsotso vovovowo hã la, àte ŋu ahiã atsyã tɔxɛwo na nudidi tɔxɛwo. Tailwind naa tɔtrɔwɔwɔ ƒe tiatia geɖe to eƒe ɖoɖowɔɖi ƒe faɛl, tailwind.config.js dzi.

Àte ŋu akeke ɖoɖowɔɖi gbãtɔa ɖe enu, awɔ amadede tɔxɛwo, breakpoints, ŋɔŋlɔdzesiwo, kple bubuwo. Gake ele vevie be nàzã nɔnɔme sia vie be nàxe mɔ ɖe wò ɖoɖowɔɖi ƒe faɛl la ƒe ʋuʋu nu.

5. Dɔwɔwɔwo & Mɔfiamewo

Tailwind CSS naa dɔwɔwɔ kple mɔfiame geɖewo be wò ŋgɔyiyi ƒe nuteƒekpɔkpɔ nanɔ bɔbɔe. Le kpɔɖeŋu me, theme() dɔwɔwɔ na be nàte ŋu akpɔ wò ɖoɖowɔɖi ƒe asixɔxɔwo tẽ le wò CSS me, si wɔnɛ be atsyã si trɔna la nɔa bɔbɔe.

Gawu la, Tailwind ƒe mɔfiamewo, abe @responsive, @variants, kple @apply ene, ɖe mɔ na wò be nàwɔ responsive, state variants, eye nàɖe atsyã siwo wogbugbɔ gblɔ, ɖe wo nɔewo yome. Dɔwɔwɔ kple mɔfiame siawo zazã nyuie ana wò ŋgɔyiyi ƒe ɖoɖoa nawɔ kabakaba eye wòana wò codebase nanɔ ɖoɖo nu.

6. Hover, Focus, Kple Nɔnɔme Bubuwo Dzi Kpɔkpɔ

Nuto bubu si me Tailwind CSS klẽna le enye element nɔnɔme vovovowo gbɔ kpɔkpɔ. Atsyãwo zazã ɖe hover, focus, active, kple nɔnɔme bubuwo dzi le bɔbɔe abe alesi nàtsɔ nɔnɔme ƒe ŋkɔ aɖo utility class la ŋgɔ ene.

Le kpɔɖeŋu me, hover:bg-blue-500 awɔ bg-blue-500 ƒe hatsotso la ŋudɔ ne wotsɔ element la ɖo edzi. Gbãtɔ siawo naa ŋusẽ gã aɖe le alesi nuawo wɔa nui le nɔnɔme vovovowo me ŋu, si wɔnɛ be wò nyatakakadzraɖoƒea zazã ƒe nuteƒekpɔkpɔ nyona ɖe edzi.

Le nyataƒoƒo me la, Tailwind CSS ƒe React nyuitɔ siawo bibi ate ŋu ana wò nyatakakadzraɖoƒe wɔwɔ ƒe ɖoɖoa nanyo ɖe edzi ŋutɔ. Mɔnu si wozãna gbã, ne wotsɔe kpe ɖe atsyãwo gbugbɔgazã nyuie, tɔtrɔ ɖe nɔnɔmewo ŋu, kple asi nyuie ŋu

Na wò Tailwind CSS dɔwɔwɔ nanyo ɖe edzi kple DivMagic

Ne èle didim be yeana yeƒe Tailwind CSS dɔwɔwɔ nanyo ɖe edzi la, kpɔ DivMagic, si nye web-browser ƒe kekeɖenudɔwɔwɔ si na be nàte ŋu awɔ kɔpi ahatrɔ asi le Tailwind CSS ƒe klasswo ŋu tẽ tso wò browser dzi eye wòwɔa dɔ le nyatakakadzraɖoƒe ɖesiaɖe.

Chrome:Install na Chrome

Firefox:Dee na Firefox

Èxɔ nyaŋuɖoɖo alo nya aɖe? Na míanya to míaƒe nuƒolanɔƒea dzi, eye míakpɔ susɔeawo gbɔ!