Tailwind CSS - Fausia upegatafa'ilagi fa'aonaponei vave e aunoa ma le tu'ua o lau HTML

Fausia Fuafuaga Lavelave ma Faigofie

Faatasi ai ma Tailwind CSS, o le fatuina o mamanu faigata e avea ma savili. O le tuʻufaʻatasia o vasega faʻaoga ma mea faʻaoga faʻapitoa e mafai ai e oe ona mamanuina faʻataʻitaʻiga lavelave ma le faigofie, e aunoa ma le faʻafefe i le faʻatinoga ma le faʻaleleia o lau 'upega tafaʻilagi.

Fausia soo se mea

O le matagofie o le Tailwind CSS o loʻo taoto i lona faʻaogaina. E mafai ona e fatuina soʻo se mea mai se itulau blog faigofie i se faʻasalalauga e-pisinisi, uma aʻo faʻaaogaina vasega tutusa faʻaoga faʻaoga.

E na'o ou mafaufauga e fa'atapulaaina. O le eseesega tele mai le faʻaaogaina o le Vanilla CSS o le saoasaoa lea e mafai ai ona e fausia ni mamanu masani.

O le masani masani o le faʻaaogaina o vasega css masani ma vaega html e pei o le div, div class, p vasega e masani lava o se filifiliga ae o le saoasaoa faʻaleleia e sau ma Tailwind CSS e faigofie ai lou olaga.

O faiga sili e le aoga

I le masani ai, o le CSS e tusia e ala i le faʻavaeina o se seti o sitaili o le lalolagi ma faʻamamaina i latou i luga o se vaega-ma-vaega faavae. E ui o se auala lauiloa lenei, e mafai ona taʻitaʻia ai le lapopoa, faigata-tausia code.

E lu'itauina e le Tailwind CSS lenei manatu, ma finau mai o le CSS aoga-muamua e ofoina atu se fofo mama, sili atu ona tausia.

Le faletusi vaega sili ona lauiloa mo Tailwind CSS

O le daisyUI o le faletusi pito sili ona lauiloa mo Tailwind CSS, faʻamaualuga i luga o le 50 vaega na muai fuafuaina, 500+ vasega aoga, ma toetoe lava a le gata o avanoa. E fa'asaoina oe mai le toe fa'afouina o le uili i taimi uma e te faia ai se galuega fou.

Aua le Toe Fausia le Uili i Taimi Uma

Nai lo le fa'ama'imau o lou taimi i le fa'agasologa faigata o le tusiaina o le tele o igoa o vasega mo poloketi fou ta'itasi, Tailwind CSS e mafai ai ona e fa'aogaina se seti fa'amalamalamaga lelei o vasega aoga.

O nei vasega e toe fa'aaogaina ma galulue fa'atasi ma le CSS cascade, e tu'uina atu ia te oe se fa'avae malosi mo au galuega uma.

Tailwind CSS - Ose Fa'aoga Muamua CSS Framework

I lona autu, Tailwind CSS o se fa'aoga-muamua CSS fa'avae. O lona uiga o lo'o tu'uina atu ai vasega fa'aoga maualalo, tu'ufa'atasi e mafai ona e fa'aogaina e fausia ai so'o se mamanu, sa'o i lau HTML. Leai ni faila CSS e le gata, naʻo le faigofie ma le faʻaogaina code.

Fa'aaogā Igoa Vasega Semantic

O igoa o vasega Semantic e fa'aleleia atili ai le faitau o lau code, fa'afaigofie ona malamalama i le mea e fai e se vasega fa'apitoa i le va'ai i lona igoa. O se tasi lea o le tele o foliga na faʻaaogaina e Tailwind CSS e faʻaleleia ai le poto masani.

CSS mama. Ta'iala Agnostic. E galue i soo se mea

Tailwind CSS e le noatia oe i soʻo se faʻavae faʻapitoa. E na'o le CSS mama, o lea e mafai ai ona e fa'aogaina i so'o se fa'avaa, pe leai fo'i se fa'avae. E galue i soo se mea e galue ai CSS.

Fa'amanuiaga ole Tailwind CSS

O faʻamanuiaga o le faʻaaogaina o le Tailwind CSS e aofia ai le faʻateleina o le gaosiga, faʻaitiitia le faila faila CSS, ma le faʻaleleia atili o le atinaʻe ona o le faʻaogaina-muamua metotia. E le gata i lea, o le Just-In-Time (JIT) mode e maua ai le uila-vave taimi e fausia ai, faʻavavevaveina lau faʻagasologa o le atinaʻe.

Tailwind CSS tau

Tailwind CSS ose galuega tatala-puna, o lona uiga e matua saoloto lava e faʻaaoga. O le tau e oʻo mai pe a e manaʻo e faʻaogaina mea faʻapitoa e pei o vaega UI ma faʻataʻitaʻiga, lea e ofoina mai e ala i Tailwind UI.

E manatu ma fetuutuunai i le taimi e tasi

Tailwind CSS e maua ai se manatu malosi i le faʻatulagaina o lau CSS, ae e lava le fetuutuunai e faʻatagaina ai le faʻatulagaina. O lenei paleni e mafai ai ona e taulaʻi atu i mea e sili ona taua - fausia UI matagofie.

Fa'aonaponei foliga

Tailwind CSS o lo'o fa'apipi'iina foliga fa'aonaponei e pei o le Flexbox, Grid, ma mea fa'ale-aganu'u, ma avea ai ma filifiliga sili mo le atina'eina o 'upega tafa'ilagi fa'aonaponei.

Fa'atonuga mo le fa'aaogaina o le CSS Tailwind

Ae e te leʻi amata faʻaaoga Tailwind CSS, e te manaʻomia se malamalamaga autu o le HTML ma le CSS.

O afea e Fa'aaoga ai le Tailwind CSS

Tailwind CSS e talafeagai mo ituaiga uma o poloketi i luga o le upega tafaʻilagi, tetele pe laiti. Afai ua e fiu e fagatua ma le CSS ma su'e se fofo e sili atu ona lelei, fa'alelei-faauo, o le Tailwind CSS e mo oe.

Le'o i totonu o fa'avae vaega?

Afai e le o oe o se tagata fiafia i vaega fa'avae e pei o React po'o Vue, leai se popolega. Tailwind CSS o se fa'avae-agnostic ma e mafai ona fa'aoga ile HTML mama ma le JavaScript.

Tutusa ma Eseesega i le va o Tailwind CSS ma isi CSS Frameworks

E ui o isi fa'avae e pei o Bootstrap ma le Foundation e ofoina atu vaega na muai fuafuaina, Tailwind CSS o lo'o tu'uina atu ia te oe meafaigaluega e fausia ai mamanu masani e aunoa ma le tuua o lau HTML. Ae ui i lea, faatasi ai ma le tuʻufaʻatasia o faletusi vaega e pei o le daisyUI, ua mafai nei ona e fiafia i le mea sili o lalolagi uma e lua.

Faiga Pogisa

O se tasi o foliga sili ona lata mai o le Tailwind CSS ma le daisyUI o le pogisa, lea e mafai ai ona e faia ni upega tafaʻilagi faʻapogisa e aunoa ma se taumafaiga.

Fa'ata'ita'iga Flexbox

Tailwind CSS fa'atasi lelei ma foliga fa'aonaponei CSS pei o le Flexbox. Mo se faʻataʻitaʻiga, e mafai ona e fatuina se faʻatulagaga tali e faʻaaoga ai vasega e pei o le flex, justify-center, mea-center, ma isi.

Faatasi ai ma le tuʻufaʻatasia o Just-in-Time, e mafai ona e faʻataʻitaʻiina faʻataʻitaʻiga eseese aoga aoga aoga faigofie. Afai e le'i aoga se tasi vasega aoga, na ona sui e fa'avasega lau elemene.

O se Fa'ata'ita'iga Fa'atonu Flexbox

O le fa'aogaina o le Tailwind CSS, e faigofie ona fai ni fa'asologa lavelave e pei o se pa fa'atautaiga tali. O se fa'ata'ita'iga lenei:

<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
  <div class="flex items-center flex-shrink-0 text-white mr-6">
    <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
  </div>
  <div class="block lg:hidden">
    <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
      <svg class="fill-current h-3 w-3" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"></path></svg>
    </button>
  </div>
  <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
    <div class="text-sm lg:flex-grow">
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">Home</a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">About</a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">Contact</a>
    </div>
  </div>
</nav>

Vaega ua saunia

Afai na e filifili e faʻaaoga le tailwind css code i lau poloketi, o le a mafai ona e mauaina le tele o vaega muamua i luga ole laiga. E mafai ona e kopiina soʻo se tasi o nei mea ma faʻapitoa mo lau lava upega tafaʻilagi.

Fa'afefea ona fa'aliliu CSS ile Tailwind CSS

O le mafai ona fa'aliliu CSS i Tailwind CSS vasega o se mea e mana'omia e le tele o tagata atia'e. E tele 'upega tafaʻilagi i luga ole initaneti na fausia aʻo leʻi iai le Tailwind CSS. O nei itulau upegatafa'ilagi e fa'aoga le css ma sitaili ma fa'apolofesa atina'e upegatafa'ilagi e manana'o e fa'asolo atu nei itulau i le Tailwind CSS.

O le DivMagic o se mea faigaluega faʻapipiʻi i luga ole laiga ua fausia mo le atinaʻeina o upega tafaʻilagi ma le atinaʻeina o polokalama. E mafai ai ona kopi so'o se sitaili mai le vanilla css i le Tailwind CSS. Faatasi ai ma le kiliki e tasi, e mafai ona e faaliliuina soʻo se vaega i luga ole initaneti ile Tailwind CSS ma faʻaoga Tailwind i lau poloketi ma faʻavasega le sitaili i soʻo se auala e te manaʻo ai.

Su'e loloto ile Tailwind CSS Philosophy

O le filosofia i tua o Tailwind CSS o le taulaʻi i le aoga. O lona uiga nai lo le fa'avasegaina o vasega vaega, Tailwind CSS e tu'uina atu vasega fa'aoga maualalo e mafai ai ona e fausia ni mamanu tulaga ese e aunoa ma le tu'ua o lau HTML.

Aisea e alu ese ai mai le CSS masani?

O le CSS masani e ono fa'atupu ai le fa'aogaina tele o fa'asili, faila fa'afefete, ma le 'div soup'. E ala i le sui i se fa'aoga-muamua CSS fa'avae e pei o le Tailwind CSS, e mafai ona e fa'aitiitia nei fa'afitauli, e maua ai se fa'amaumauga mama, sili atu ona fa'afaigofie.

Tofo i le Mana o Vasega Fa'aoga

O vasega aoga e fesoasoani ia te oe e aloese ai mai le toe faia o sitaili tutusa i au sitaili. O se mataupu faavae o le "Aua le toe faia oe lava" (MAGA). O nei vasega e faʻasaoina oe taimi ma taumafaiga taua ma taʻitaʻia ai se codebase sili ona tausia.

Su'esu'ega Tailwind CSS Directives

Tailwind CSS fa'alauiloa ni nai fa'atonuga e mafai ona fa'aoga i totonu o lau sitaili. E aofia ai le @apply , @variants , ma @screen. O le malamalama ma le fa'aogaina o nei fa'atonuga e mafai ona fa'aleleia atili ai lou poto masani CSS Tailwind. E mafai ona tu'u i le faila CSS Tailwind Config. E mafai ona e tusia vasega css e faʻaaoga ai lenei auala.

Fa'alautele le CSS Tailwind ma Polokalama

Tailwind CSS e mafai ona faʻalauteleina i plugins, faʻaopoopoina galuega fou poʻo le faʻavasegaina o le mea o iai. Aoao pe faʻafefea ona faʻaogaina plugini e faʻateleina ai le lelei ma le faʻalelei o au poloketi i luga ole laiga.

Fa'aaofia le Tailwind CSS i lau Fa'asologa o Galuega

O le tu'ufa'atasia o le CSS Tailwind i totonu o lau su'esu'ega tau atina'e e faigofie, pe o lo'o e fa'aogaina meafaigaluega faufale e pei o le Webpack po'o le Parcel, po'o le galue i fa'avaa e pei o Next.js po'o Gatsby.

Fa'aleleia le avanoa ile Tailwind CSS

E fa'amalosia e le Tailwind CSS le fa'aogaina o mamanu e ala i le fa'aofiina o le tele o uiga ARIA i ana vasega. Fausia ni feso'ota'iga sili atu ona faigofie ma fa'aleleia le poto masani o tagata fa'aoga mo tagata uma.

Fa'aaoga le Mana ole Flexbox ma Grid ile Tailwind CSS

Fa'aaoga fa'aonaponei fa'asologa o fa'atulagaga CSS pei o Flexbox ma Grid fa'atasi ai ma Tailwind CSS. A'oa'o pe fa'afefea ona fa'aoga vasega aoga e pulea ai le fa'atulagaina i se faiga fetu'utu'una'i ma tali atu.

Fa'afefea ona Debug au Tailwind CSS Poloketi

Tailwind CSS o lo'o tu'uina mai ai le tele o mea fa'aoga ma auala e fa'afaigofie ai le fa'ailoaina ma le fo'ia o fa'afitauli. Malamalama i nei meafaigaluega ma faʻaleleia ou tomai faʻapipiʻi.

Fausia se Upega Felanulanua'i ma Tailwind CSS

Tailwind CSS o lo'o sau ma se paleti lautele o lanu fa'apitoa. A'oa'o pe fa'apefea ona fa'aoga ma fa'avasegaina nei lanu e fatu ai ni fa'ata'ita'iga olaola ma mata'ina.

Atiina vave ma le Tailwind CSS' JIT Mode

Saili loloto i le Tailwind CSS's Just-In-Time mode. Malamalama pe faʻapefea ona galue ma pe faʻafefea ona faʻavavevaveina lau atinaʻe ma taimi fau.

Mai le Zero i le Toa: Master Tailwind CSS

Amata i se faigamalaga i le fa'ata'ita'iina o le CSS Tailwind. Mai le fa'atulagaina o lou si'osi'omaga i le su'esu'eina o mataupu fa'alautele, o lenei ta'iala fa'apitoa ua e aofia ai.

Fa'apitoa CSS Tailwind i ou mana'oga

O se tasi o malosiaga sili o Tailwind CSS o lona fetuutuunai. A'oa'o pe fa'afefea ona fa'avasega le Tailwind e fetaui ma mana'oga fa'apitoa o lau poloketi.

Fa'aoga lima ma Tailwind CSS

Auai i aʻoaʻoga faʻapitoa e ala i se faʻasologa o faʻataʻitaʻiga aoga. Su'esu'e pe fa'apefea ona fausia ni vaega 'upega tafa'ilagi e fa'aaoga ai le Tailwind CSS ma le DaisyUI.

Femalaga mai isi CSS Frameworks i Tailwind CSS

Mafaufau e sui ile Tailwind CSS? Malamalama i le eseesega autu i le va o Tailwind ma isi auivi, ma aʻoaʻo ni taʻiala lelei mo le faimalaga o au galuega.

E mafai ona e fa'aogaina le DivMagic po'o meafaigaluega fa'apena e fa'ateleina ai lou saoasaoa o femalagaiga.

O mea faigaluega faʻapipiʻi i luga ole laiga e pei ole DivMagic e mafai ai ona e kopiina soʻo se elemene soʻo se mamanu ma soʻo se sitaili mai soʻo se upega tafaʻilagi ma le kiliki e tasi.

O se Fa'ata'ita'iga Faigofie: Fausiaina o se Fa'ailoga Fa'atasi o le Kata

O se fa'ata'ita'iga lea o le auala e mafai ai ona e fausia se vaega kata tali fa'aaoga Tailwind CSS. O lenei vaega o le a iai se ata, ulutala, ma se faʻamatalaga.

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="/img/store.jpg" alt="Store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Your Product</div>
      <p class="mt-2 text-gray-500">This is a brief description of your product. The card uses utility classes for padding, text color, and the uppercase font styling.</p>
    </div>
  </div>
</div>

Fausiaina o se Pepa ile Tailwind CSS

Fausia se fomu ma Tailwind CSS e tuusaʻo ma faʻaogaina. Ose fomu fa'afeso'ota'i faigofie:

<div class="w-full max-w-xs">
  <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
    <div class="mb-4">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
        Username
      </label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
    </div>
    <div class="mb-6">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
        Password
      </label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
    </div>
    <div class="flex items-center justify-between">
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
        Sign In
      </button>
    </div>
  </form>
</div>

Fa'asinomaga CSS Tailwind

Tailwind CSS e mafai ai e oe ona faʻavasegaina lona faʻaogaina faʻaletonu, faʻafetaui vasega aoga i ou manaʻoga. I lalo ifo o loʻo iai se faʻataʻitaʻiga o le faʻaogaina o le lanu lanu.

O nei faʻataʻitaʻiga e faʻaalia ai le fetuutuunai ma le faigofie o le Tailwind CSS, faʻaalia le auala e mafai ai ona latou fesoasoani ia te oe i le fausiaina o mea faʻaonaponei, faʻaoga i luga ole laiga i le lelei ma le lelei.

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#243c5a',
        'custom-green': '#387c6d',
      }
    }
  }
}

Ou te mana'omia se faila CSS?

Pau lava le faila e te mana'omia ile Tailwind CSS ole faila tailwind.config.js.

O lena faila o le a taofia au faʻatulagaga faʻatulagaina. E te le tusia css pe iai se isi faila css. E na'o le faila lea e te mana'omia.

O a faiga sili mo Tailwind CSS?

Mo fa'amatalaga au'ili'ili ile Tailwind CSS fa'ata'ita'iga sili, fa'amolemole va'ai la matou isi tusitusiga Tailwind CSS Best Practices.

Tailwind CSS: Le Lumana'i o Web Design

Mafaufau pe faʻafefea e Tailwind CSS ona faʻatulagaina le lumanaʻi o le web design. A'oa'o e uiga i lona aafiaga ma le gafatia mo le tuputupu a'e i le atina'eina o upega tafa'ilagi.