Tailwind Fa'ata'ita'iga Sili - Le Ta'iala Sili mo Tailwind CSS
A oʻo mai i le faʻatinoina o le aoga-muamua CSS, Tailwind CSS ua avea ma faʻaoga-i fofo mo le tele o atinaʻe.
O le fetuutuunai, gaosiga, ma le faigofie o le faʻaogaina o loʻo ofoina mai ua faʻamaonia le taua tele i le atinaʻeina o upega tafaʻilagi faʻaonapo nei.
Peita'i, pei o so'o se mea faigaluega, ina ia maua le tele o mea, e taua tele le malamalama ma fa'aoga le Tailwind CSS faiga sili.
Se'i tatou su'esu'e i nisi o nei metotia.
1. Utility-First Fundamentals
O le filosofia muamua-fa'aaogaina o le fa'avae autu lea o le Tailwind CSS, e fa'amoemoe e fa'amalosia le au atina'e i vasega fa'aoga maualalo nai lo vaega na muai fuafuaina. O lenei faiga e mafai muamua ona foliga fa'afefe ona o le fa'aogaina o lau HTML; ae ui i lea, a malamalama loa, e mafai ai ona vave fa'ata'ita'i ma fa'atulagaina tulaga o gaosiga.
I totonu o se fa'aoga-muamua fa'ata'ita'iga, o vasega ta'itasi e fetaui ma se uiga fa'apitoa. Mo se faʻataʻitaʻiga, o le vasega autu-tusitusi o le a faʻaogaina lau tusitusiga i le ogatotonu, ae o le bg-blue-500 o le a tuʻuina atu i lau elemene se paolo patino o le lanu moana.
O lenei faiga e fa'aolaina ai le toe fa'aogaina o vaega ma fa'aitiitia le aofa'i o le CSS e te tusia, fa'ate'a ai fa'afitauli masani e pei o taua fa'apitoa ma le fa'aumatiaina o tulafono.
2. Fuafuaga Talitonu
Tailwind CSS e sili atu foi i le mamanu tali. O lo'o fa'aogaina ai le telefoni feavea'i-muamua le va'aiga, o lona uiga o sitaili e fa'aoga i lau la'ititi e faigofie ona fa'asolo i lau tetele. E mafai ona faia lenei mea i le fa'aogaina o fa'ailoga faigofie e pei o le sm:, md:, lg:, ma le xl: a'o le'i faia au vasega aoga.
Mo se fa'ata'ita'iga, md:text-center o le a na'o le fa'aogaina o le text-center vasega i luga ole lapopoa ma lau tetele. Ole mea lea e fa'atagaina ai oe e fa'ata'ita'i fa'apitoa mo lapo'a eseese o lau, ma fa'afaigofie ai le mamanu tali mai ma Tailwind.
3. Toe Fa'aaogaina Sitaili
A'o fa'amalosia e fa'aoga-muamua le fa'aogaina sa'o o sitaili i lau HTML, o le toe faia o tu'ufa'atasiga lavelave o mea aoga e mafai ona fa'alavelave. Lenei, Tailwind's @apply faʻatonuga e avea ma se faʻaola ola, faʻatagaina oe e faʻapipiʻi sitaili masani i vasega CSS masani.
Mo se fa'ata'ita'iga, afai e masani ona e fa'aogaina le tu'ufa'atasiga o le bg-red-500 text-white p-6, e mafai ona e faia se vasega fou e pei o le .error ma fa'aoga @apply e toe fa'aoga ai nei sitaili. E fa'aleleia atili ai le faitau ma le fa'atumauina o le code.
4. Fa'aopoopoina Sitaili Fa'apitoa
E ui lava o le Tailwind CSS e sau ma le tele o vasega aoga, atonu e te manaʻomia sitaili masani mo manaʻoga faʻapitoa. Tailwind e ofoina atu le tele o filifiliga faʻapitoa e ala i lana faila faʻatulagaina, tailwind.config.js.
E mafai ona e fa'alautele le fa'atulagaina fa'aletonu, fatuina o lanu fa'ale-aganu'u, va'aiga, fonuka, ma isi mea. E taua tele, peita'i, ia fa'aoga fa'apitoa lenei vaega e puipuia ai le fa'atupuina o lau faila fa'atulagaina.
5. Galuega & Faatonuga
Tailwind CSS e maua ai le tele o galuega ma faʻatonuga e faʻafaigofie ai lau atinaʻe. Mo se faʻataʻitaʻiga, o le autu () galuega e mafai ai ona e mauaina saʻo au faʻatulagaga faʻatulagaina i lau CSS, faʻafaigofie le sitaili malosi.
E le gata i lea, o faʻatonuga a Tailwind, e pei o @responsive, @variants, ma @apply, e faʻatagaina oe e faʻatupuina le tali atu, tulaga eseʻese, ma aveese faʻasologa o sitaili, i le faasologa. O le fa'aogaina tatau o nei galuega ma fa'atonuga o le a fa'avavevave ai lau atina'e ma fa'atumauina lau fa'avae fa'avae.
6. Taulimaina Hover, Focus, ma Isi Setete
O le isi vaega o lo'o susulu mai ai le Tailwind CSS o lo'o fa'atautaia tulaga elemene eseese. O le fa'aogaina o sitaili i luga o le fa'afefe, taula'i, malosi, ma isi setete e faigofie pei o le fa'auluina o le vasega aoga ma le igoa o le setete.
Mo se faʻataʻitaʻiga, faʻafefe:bg-blue-500 o le a faʻaogaina le vasega bg-blue-500 pe a faʻapipiʻi le elemene. O nei prefix e ofoina atu le maualuga maualuga o le pulea i le auala e amio ai elemene i setete eseese, faʻaleleia le poto masani a le tagata faʻaoga.
I le fa'ai'uga, o le a'oa'oina o nei Tailwind CSS fa'ata'ita'iga sili e mafai ona fa'aleleia atili ai lau fa'agasologa o le atina'eina o upega tafa'ilagi. O se fa'aoga-muamua auala, pe a tu'ufa'atasia ma le toe fa'aoga lelei o sitaili, fa'avasegaga, ma le lima lelei
Fa'alelei lau Tailwind CSS galuega fa'aoga ile DivMagic
Afai o lo'o e va'ava'ai e fa'aleleia lau su'ega Tailwind CSS, siaki le DivMagic, o se fa'aopoopoga o su'esu'ega e mafai ai ona e kopiina ma fa'aliliu sa'o vasega Tailwind CSS mai lau su'esu'ega ma e aoga i so'o se upega tafa'ilagi.
Auai i le lisi imeli DivMagic!
Avea ma tagata muamua e iloa tala fou, foliga fou ma isi mea!
Taofi le lesitala i soo se taimi. Leai se spam.
Tuutuuga & Faiga Faavae
© 2024 DivMagic, Inc. Ua taofia aia tatau uma.