Nga Mahi Pai Tailwind - Ko te Aratohu Whakamutunga mo te Tailwind CSS

Ina tae mai ki te whakatinana i te CSS-tuatahi, ko Tailwind CSS kua noho hei otinga mo te maha o nga kaihanga.

Ko te ngawari, te hua, me te ngawari o te whakamahi ka tukuna he mea tino nui ki te whanaketanga paetukutuku hou.

Heoi, pera i nga taputapu katoa, kia whai hua ai, he mea nui ki te mohio me te whakamahi i nga tikanga pai a Tailwind CSS.

Me ruku tatou ki etahi o enei tikanga.

1. Utility-First Fundamentals

Ko te rapunga whakaaro-tuatahi te kaupapa matua o Tailwind CSS, e whai ana ki te whakamana i nga kaiwhakawhanake me nga karaehe whaipainga taumata iti hei utu mo nga waahanga i hangaia i mua. Ko tenei huarahi i te tuatahi ka ahua pouri na te kaha o to HTML; heoi, ka mohio ana, ka taea te whakatauira tere me te whakarite taumata-whakaputa.

I roto i te hoahoanga whaipainga-tuatahi, ka rite ia karaehe ki tetahi huanga ahua motuhake. Hei tauira, ko te karaehe kupu-pokapū ka whakahāngai i to kupu ki te pokapū, engari ko te bg-blue-500 ka hoatu ki to huānga he atarangi o te papamuri kikorangi.

Ko tenei huarahi e whakatairanga ana i te whakamahinga o te waahanga me te whakaiti i te nui o te CSS ka tuhia e koe, ka whakakore i nga take noa penei i nga pakanga motuhake me te whakakore i nga waehere mate.

2. Hoahoa Whakautu

He pai hoki a Tailwind CSS ki te hoahoa urupare. Ka whakamahia e ia he punaha whawhati pūkoro-tuatahi, ko te tikanga ko nga momo ka whakamahia ki nga mata iti ka ngawari te huri ki nga mata nui ake. Ka taea tenei ma te whakamahi i nga prefix ngawari penei i te sm:, md:, lg:, me te xl: i mua i o akomanga whaipainga.

Hei tauira, md:text-center ka whakamahi noa i te karaehe-pokapū-kupu ki runga i nga mata waenga me te rahi ake. Ma tenei ka taea e koe te hoahoa maataki mo nga rahi o te mata, kia pai te hoahoa urupare me Tailwind.

3. Te whakamahi ano i nga ahua

Ahakoa e akiaki ana te whaipainga-tuatahi ki te tono ahua tika ki to HTML, ka raru pea te tukurua i nga whakakotahitanga uaua o nga taputapu. I konei, ko te @apply a Tailwind ka noho hei whakaora, ka taea e koe te tango i nga momo taapiri ki nga karaehe CSS ritenga.

Hei tauira, mena ka whakamahi koe i te huinga o te bg-whero-500 kupu-maama p-6, ka taea e koe te hanga karaehe hou penei i te .error me te whakamahi @apply hei whakamahi ano i enei momo. Ka whakanui ake tenei i te panui me te pupuri i nga waehere.

4. Te taapiri i nga momo ritenga

Ahakoa ka tae mai a Tailwind CSS me te maha o nga karaehe whaipainga, ka hiahia pea koe ki nga momo ritenga mo nga whakaritenga motuhake. Ka tukuna e Tailwind te maha o nga whiringa whakaritenga ma tana konae whirihoranga, tailwind.config.js.

Ka taea e koe te whakawhānui ake i te whirihoranga taunoa, te hanga i nga tae ritenga, nga waahi pakaru, nga momotuhi, me etahi atu. He mea nui, engari, kia iti te whakamahi i tenei waahanga hei aukati i te pupuhi o to konae whirihoranga.

5. Nga Mahi me nga Aratohu

He maha nga mahi me nga tohutohu a Tailwind CSS kia pai ake ai to wheako whanaketanga. Hei tauira, ko te kaupapa() mahi ka taea e koe te uru tika ki o uara whirihoranga i roto i to CSS, kia pai ai te whakaahuatanga.

I tua atu, ko nga tohutohu a Tailwind, penei i te @responsive, @variants, me te @apply, ka taea e koe te whakaputa urupare, nga momo ahua, me te tango i nga momo taapiri. Ma te whakamahi tika i enei mahi me nga tohutohu ka tere ake to mahi whanaketanga me te whakarite i to turanga.

6. Te Whakahaere Hover, Focus, and Other States

Ko tetahi atu waahi e whiti ana a Tailwind CSS ko te whakahaere i nga ahuatanga huānga rereke. Ko te tono momo ki te whakaparo, te arotahi, te hohe, me etahi atu ahua he mea ngawari ki te whakauru i te akomanga whaipainga me te ingoa kawanatanga.

Hei tauira, whakaparo:bg-blue-500 ka hoatu te karaehe bg-blue-500 ka whakaparohia te huānga ki runga. Ko enei prefix e whakarato ana i te taumata teitei o te mana whakahaere mo nga ahuatanga o nga huānga i roto i nga whenua rereke, me te whakarei ake i te wheako kaiwhakamahi o to pae.

Hei whakamutunga, ma te mohio ki enei mahinga Tailwind CSS pai rawa atu ka taea te whakanui i to tukanga whanaketanga paetukutuku. He huarahi whaipainga-tuatahi, ka honoa ki te whakamahi ano i nga momo ahua, whakaritenga, me te ringaringa pai

Whakapai ake i to Tailwind CSS rerengamahi me DivMagic

Mena kei te rapu koe ki te whakapai ake i to rerengamahi Tailwind CSS, tirohia te DivMagic, he toronga tirotiro ka taea e koe te kape me te huri tika i nga akomanga Tailwind CSS mai i to kaitirotiro ka mahi i runga i tetahi paetukutuku.

Chrome:Tāuta mo Chrome

Firefox:Tāuta mo Firefox

He urupare, he take ranei? Whakamhio mai na roto i ta maatau papaahi, a ma matou e whakahaere te toenga!