Cleachdaidhean as Fheàrr Tailwind - An Stiùireadh mu dheireadh airson CSS Tailwind

Nuair a thig e gu bhith a’ cur an gnìomh CSS goireasach-an-toiseach, tha Tailwind CSS air a thighinn gu bhith na fhuasgladh airson mòran de luchd-leasachaidh.

Tha sùbailteachd, cinneasachd agus furasta a chleachdadh air a bhith air leth luachmhor ann an leasachadh lìn an latha an-diugh.

Ach, mar inneal sam bith, gus a’ chuid as fheàrr fhaighinn às, tha e deatamach na cleachdaidhean as fheàrr le Tailwind CSS a thuigsinn agus a chuir an sàs.

Leig leinn dàibheadh a-steach do chuid de na dòighean sin.

1. Utility-First Basics

Is e an fheallsanachd goireas-an-toiseach prìomh phrionnsapal Tailwind CSS, ag amas air cumhachd a thoirt do luchd-leasachaidh le clasaichean goireis aig ìre ìosal an àite co-phàirtean ro-dhealbhaichte. Faodaidh an dòigh-obrach seo a bhith eagallach an toiseach air sgàth briathrachas an HTML agad; ach, aon uair ‘s gu bheil e air a thuigsinn, bidh e a’ comasachadh prototyping luath agus gnàthachadh ìre toraidh.

Ann an ailtireachd goireas-an-toiseach, tha gach clas a’ freagairt ri feart stoidhle sònraichte. Mar eisimpleir, co-thaobhadh an clas meadhan-teacsa an teacsa agad ris an ionad, agus bheir bg-blue-500 dubhar sònraichte de chùl-raon gorm don eileamaid agad.

Bidh an dòigh-obrach seo a’ brosnachadh ath-chleachdadh phàirtean agus a’ lughdachadh na tha de CSS a sgrìobhas tu, a’ cur às do chùisean cumanta leithid cogaidhean sònraichte agus cuir às do chòd marbh.

2. Dealbhadh Freagarrach

Tha Tailwind CSS cuideachd air leth math ann an dealbhadh freagairteach. Bidh e a’ cleachdadh siostam puing brisidh gluasadach an-toiseach, a’ ciallachadh gum faod stoidhlichean a chuirear air scrionaichean nas lugha casg gu furasta gu feadhainn nas motha. Faodar seo a dhèanamh le bhith a’ cleachdadh ro-leasachan sìmplidh mar sm :, md :, lg :, agus xl : ro na clasaichean goireis agad.

Mar eisimpleir, cha chuir md:text-center an sàs ach an clas ionad-teacsa air sgàilean meadhanach agus nas motha. Leigidh seo leat dealbhadh intuitive airson diofar mheudan sgrion, a’ dèanamh dealbhadh freagairteach na ghaoith le Tailwind.

3. Stoidhlichean ath-chleachdadh

Ged a tha utility-an-toiseach a' brosnachadh stoidhlichean a chur an sàs gu dìreach ris an HTML agad, faodaidh e bhith doirbh a bhith ag ath-aithris measgachadh iom-fhillte de ghoireasan. An seo, bidh stiùireadh @apply aig Tailwind gu bhith na shàbhaladh-beatha, a’ toirt cothrom dhut diofar stoidhlichean a tharraing a-steach do chlasaichean àbhaisteach CSS.

Mar eisimpleir, ma chleachdas tu am measgachadh de bg-red-500 text-white p-6 gu tric, faodaidh tu clas ùr a chruthachadh mar .error agus cleachd @apply gus na stoidhlichean sin ath-chleachdadh. Bidh seo a’ cur ri leughadh còd agus seasmhachd.

4. Adding Custom Styles

Eadhon ged a thig Tailwind CSS le raon farsaing de chlasaichean goireis, is dòcha gu feum thu stoidhlichean àbhaisteach airson riatanasan sònraichte. Tha Tailwind a’ tabhann roghainnean gnàthachaidh farsaing tron fhaidhle rèiteachaidh aige, tailwind.config.js.

Faodaidh tu an rèiteachadh bunaiteach a leudachadh, a’ cruthachadh dathan àbhaisteach, puingean brisidh, clòidean agus barrachd. Tha e cudromach, ge-tà, am feart seo a chleachdadh gu gann gus casg a chuir air am faidhle rèiteachaidh agad a spreadhadh.

5. Gnìomhan & Stiùiridhean

Tha Tailwind CSS a’ toirt seachad grunn ghnìomhan agus stiùiridhean gus an eòlas leasachaidh agad a dhèanamh nas socair. Mar eisimpleir, leigidh an gnìomh theme() leat faighinn gu na luachan rèiteachaidh agad gu dìreach anns an CSS agad, a’ comasachadh stoidhle fiùghantach.

A bharrachd air an sin, tha stiùiridhean Tailwind, leithid @responsive, @variants, agus @apply, a’ leigeil leat caochlaidhean freagairteach, stàite a ghineadh, agus stoidhlichean ath-aithris a thoirt a-mach, fa leth. Le bhith a’ cleachdadh nan gnìomhan agus na stiùiridhean sin gu h-iomchaidh brosnaichidh sin do phròiseas leasachaidh agus cumaidh e do chòd eagraichte.

6. Làimhseachadh Hover, Fòcas, agus Stàitean Eile

Tha raon eile far a bheil Tailwind CSS a’ deàrrsadh a’ làimhseachadh diofar stàitean eileamaid. Tha a bhith a’ cur stoidhlichean air hover, fòcas, gnìomhach, agus stàitean eile cho sìmplidh ri bhith a’ ro-leasachan a’ chlas goireis le ainm na stàite.

Mar eisimpleir, cuiridh hover:bg-blue-500 an clas bg-gorm-500 an sàs nuair a thèid an eileamaid thairis. Tha na ro-leasachain sin a’ tabhann ìre àrd de smachd air mar a bhios eileamaidean gan giùlan fhèin ann an diofar stàitean, ag àrdachadh eòlas cleachdaiche na làraich agad.

Gu crìch, le bhith a’ faighinn eòlas air na cleachdaidhean as fheàrr Tailwind CSS seo faodaidh iad do phròiseas leasachaidh lìn àrdachadh gu mòr. Dòigh-obrach goireasach an-toiseach, nuair a thèid a chur còmhla ri ath-chleachdadh èifeachdach de stoidhlichean, gnàthachadh, agus deagh làmh

Leasaich do shruth-obrach CSS Tailwind le DivMagic

Ma tha thu airson do shruth-obrach Tailwind CSS a leasachadh, thoir sùil air DivMagic, leudachadh brobhsair a leigeas leat clasaichean Tailwind CSS a chopaigeadh agus a thionndadh gu dìreach bhon bhrobhsair agad agus bidh e ag obair air làrach-lìn sam bith.

Chrome:Stàlaichear airson chrome

Firefox:Stàlaichear airson firefox a

A bheil fios air ais no duilgheadas agad? Leig fios thugainn tron àrd-ùrlar againn, agus làimhsichidh sinn an còrr!