Tailwind CSS - Theha liwebsaete tsa sejoale-joale kapele ntle le ho siea HTML ea hau

Theha Meralo e rarahaneng ka Bonolo

Ka Tailwind CSS, ho theha meralo e rarahaneng ho fetoha moea o pholileng. Motsoako oa lihlopha tsa lisebelisoa le lisebelisoa tsa moralo tse arabelang li u lumella ho rala meralo e rarahaneng habonolo, ntle le ho sekisetsa ts'ebetsong le ts'ebetsong ea sebaka sa hau sa marang-rang.

Haha eng kapa eng

Botle ba Tailwind CSS bo itšetlehile ka ho feto-fetoha ha eona. U ka etsa eng kapa eng ho tloha leqepheng le bonolo la blog ho ea sethaleng se tsoetseng pele sa e-commerce, ha u ntse u sebelisa litlelase tse tšoanang tsa ts'ebeliso e hlakileng.

U lekantsoe feela ke monahano oa hau. Phapang e kholo ho tloha ho Vanilla CSS ke lebelo leo ka lona u ka hahang meralo e tloaelehileng.

Mokhoa o tloaelehileng oa ho sebelisa litlelase tsa css tse nang le likarolo tsa html joalo ka div, div class, p class e lula e le khetho empa ntlafatso ea lebelo e tlisoang ke Tailwind CSS e nolofalletsa bophelo ba hau.

Mekhoa e metle ha e sebetse

Ka tloaelo, CSS e ngoloa ka ho theha setaele sa lefats'e ka bophara le ho se hloekisa ho latela karolo-ka-karolo. Le hoja ona e le mokhoa o tummeng, o ka lebisa ho bulky, ho thata ho boloka khoutu.

Tailwind CSS e phephetsa khopolo ena, e pheha khang ea hore CSS ea pele e fana ka tharollo e hloekileng, e tsitsitseng haholoanyane.

Laeborari ea likarolo tse tsebahalang haholo bakeng sa Tailwind CSS

daisyUI ke laeborari ea likarolo tse tsebahalang haholo bakeng sa Tailwind CSS, e ithorisang ka likarolo tse 50 tse reriloeng esale pele, litlelase tse 500+ tsa lisebelisoa, le menyetla e sa feleng. E u pholosa hore u se ke ua tsosolosa lebili nako le nako ha u theha morero o mocha.

U se ke ua Tseba Lebili Hape Nako le Nako

Sebakeng sa ho senya nako ea hau ka mokhoa o khathatsang oa ho ngola mabitso a mangata a sehlopha bakeng sa projeke e 'ngoe le e 'ngoe e ncha, Tailwind CSS e u thusa ho sebelisa litlelase tse sebelisoang hantle, tse hlalosang mantsoe.

Litlelase tsena li ka sebelisoa hape 'me li sebetsa ka kutloano le CSS cascade, li u fa motheo o tiileng oa merero eohle ea hau.

Tailwind CSS - A Utility First CSS Framework

Motheong oa eona, Tailwind CSS ke moralo oa pele oa CSS. Sena se bolela hore e fana ka litlelase tsa maemo a tlase, tse ka sebelisoang ho aha moralo ofe kapa ofe, ka kotloloho ho HTML ea hau. Ha ho na lifaele tsa CSS tse sa feleng, ke khoutu e bonolo feela le e hlakileng.

Sebelisa Mabitso a Sehlopha sa Semantic

Mabitso a sehlopha sa semantic a ntlafatsa ho baloa ha khoutu ea hau, ho etsa hore ho be bonolo ho utloisisa seo sehlopha se itseng se se etsang feela ka ho sheba lebitso la sona. Ena ke e 'ngoe ea likarolo tse ngata tseo Tailwind CSS e li amohetseng ho ntlafatsa boiphihlelo ba mohlahlami.

CSS e hloekileng. Moralo oa Agnostic. E sebetsa Hohle

Tailwind CSS ha e u tlamelle ho moralo ofe kapa ofe o ikhethileng. Ke CSS e hloekileng feela, kahoo o ka e sebelisa ka moralo ofe kapa ofe, kapa o se na moralo ho hang. E sebetsa hohle moo CSS e sebetsang teng.

Melemo ea Tailwind CSS

Melemo ea ho sebelisa Tailwind CSS e kenyelletsa tlhahiso e eketsehileng, boholo ba faele ea CSS bo fokotsehileng, le boiphihlelo bo ntlafalitsoeng ba ntlafatso ka lebaka la mokhoa oa pele oa ts'ebeliso. Ho feta moo, mokhoa oa Just-In-Time (JIT) o fana ka linako tsa ho aha kapele, e leng ho potlakisa ts'ebetso ea hau ea nts'etsopele.

Theko ea Tailwind CSS

Tailwind CSS ke projeke ea mohloli o bulehileng, e bolelang hore e lokolohile ka botlalo. Litsenyehelo li tla ha u batla ho fumana likarolo tsa premium joalo ka likarolo tsa UI le litempele, tse fanoang ka Tailwind UI.

E na le maikutlo ebile e tenyetseha ka nako e le 'ngoe

Tailwind CSS e fana ka maikutlo a matla mabapi le mokhoa oa ho theha CSS ea hau, leha ho le joalo e tenyetseha ka ho lekaneng ho lumella ho itloaetsa. Tekanyo ena e u thusa ho tsepamisa maikutlo ho se bohlokoa haholo - ho aha li-UI tse ntle.

Likarolo tsa kajeno

Tailwind CSS e kenyelletsa likarolo tsa sejoale-joale joalo ka Flexbox, Grid, le thepa ea moetlo, e e etsa khetho e ntle haholo bakeng sa ho theha lits'ebetso tsa sejoale-joale tsa webo.

Litlhoko tsa ho Sebelisa Tailwind CSS

Pele o qala ho sebelisa Tailwind CSS, o hloka kutloisiso ea mantlha ea HTML le CSS.

Nako ea ho Sebelisa Tailwind CSS

Tailwind CSS e loketse mefuta eohle ea merero ea marang-rang, e meholo kapa e nyane. Haeba u khathetse ke ho loana le CSS 'me u batla tharollo e sebetsang haholoanyane, e bonolo ho nts'etsopele, joale Tailwind CSS ke ea hau.

Eseng ka har'a likarolo tsa moralo?

Haeba ha u morati oa meralo ea likarolo joalo ka React kapa Vue, ha ho na matšoenyeho. Tailwind CSS ke framework-agnostic mme e ka sebelisoa ka HTML e hloekileng le JavaScript.

Ho Tšoana le Liphapang Pakeng tsa Tailwind CSS le Merero e meng ea CSS

Le hoja mekhoa e meng e kang Bootstrap le Foundation e fana ka likarolo tse entsoeng esale pele, Tailwind CSS e u fa lisebelisoa tsa ho haha ​​​​meralo e tloaelehileng ka ho feletseng ntle le ho tlohela HTML ea hau. Leha ho le joalo, ka ho kopanngoa ha lilaebrari tsa likarolo tse kang daisyUI, joale u ka natefeloa ke tse molemo ka ho fetisisa lefatšeng ka bobeli.

Mokhoa o Lefifi

E 'ngoe ea likarolo tsa morao-rao tsa Tailwind CSS le daisyUI ke mokhoa o lefifi, o o nolofalletsang ho theha liwebosaete tse lefifi ntle le matla.

Mohlala oa Flexbox

Tailwind CSS e hokahana hantle le likarolo tsa sejoale-joale tsa CSS joalo ka Flexbox. Mohlala, o ka etsa moralo o arabelang o sebelisa litlelase tse kang flex, justify- center, items-center, joalo-joalo.

Ka ho kopana ha Just-in-Time, o ka leka maemo a fapaneng a lisebelisoa habonolo. Haeba sehlopha se le seng sa lisebelisoa se sa sebetse, se fetole feela hore u iketsetse karolo ea hau.

Mohlala oa Sebopeho sa Flexbox

Ka ho sebelisa Tailwind CSS, ho bonolo ho theha meralo e rarahaneng joalo ka sebaka sa ho sesa se arabelang. Mohlala ke ona:

<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>

Likarolo tse lokiselitsoeng

Haeba u nkile qeto ea ho sebelisa khoutu ea tailwind css morerong oa hau, u tla khona ho fumana likarolo tse ngata tse entsoeng esale pele inthaneteng. U ka kopitsa leha e le efe ea tsena 'me u iketsetse sebaka sa hau sa marang-rang.

Mokhoa oa ho fetolela CSS ho Tailwind CSS

Ho khona ho fetolela CSS hore e be lihlopha tsa Tailwind CSS ke ntho eo bahlahisi ba bangata ba e hlokang. Ho na le liwebsaete tse ngata marang-rang tse hahiloeng pele Tailwind CSS e ba teng. Maqephe ana a marang-rang a sebelisa css e nang le li-stylesheet le litsebi tsa ntlafatso ea marang-rang li batla ho fallisetsa maqephe ana ho Tailwind CSS.

DivMagic ke sesebelisoa sa nts'etsopele ea webo se etselitsoeng moqapi oa webo le baetsi ba software. E lumella mokhoa ofe kapa ofe hore o kopitsoe ho tloha ho vanilla css ho ea ho Tailwind CSS. Ka ho tobetsa hanngoe feela, u ka fetolela karolo efe kapa efe inthaneteng ho ea ho Tailwind CSS 'me u sebelise Tailwind morerong oa hau mme u iketsetse setaele ka tsela efe kapa efe eo u e batlang.

Ikakhele ka setotsoana ho Tailwind CSS Philosophy

Filosofi e ka morao ho Tailwind CSS ke ho tsepamisa maikutlo ho utility. Sena se bolela ho e-na le ho bolela esale pele litlelase tsa likarolo, Tailwind CSS e fana ka litlelase tsa maemo a tlase tse u thusang ho etsa meralo e ikhethang ntle le ho siea HTML ea hau.

Ke Hobane'ng ha U Tloha ho CSS ea Setso?

Traditional CSS e ka baka tshebediso e feteletseng ya ho tlola, difaele tse tswileng matsoho, le 'div soup'. Ka ho fetohela ho moralo oa pele oa CSS joalo ka Tailwind CSS, o ka fokotsa litaba tsena, oa etsa hore ho be le codebase e hloekileng, e hlophisitsoeng haholoanyane.

Fumana Matla a Litlelase tsa Utility

Lithuto tsa lisebelisoa li u thusa ho qoba ho pheta-pheta mekhoa e tšoanang ho li-stylesheets tsa hau. Ke molao-motheo oa "U se ke Ua Ipheta" (OMETSE). Litlelase tsena li u bolokela nako le matsapa a bohlokoa 'me li lebisa ho codebase e hlokometsoeng haholo.

Ho hlahloba Tailwind CSS Directives

Tailwind CSS e hlahisa litaelo tse 'maloa tse ka sebelisoang ka har'a li-stylesheets tsa hau. Tsena li kenyelletsa @apply, @variants, le @screen. Ho utloisisa le ho sebelisa litaelo tsena ho ka ntlafatsa haholo boiphihlelo ba hau ba Tailwind CSS. Tsena li ka kenngoa faeleng ea Tailwind Config CSS. U ka ngola litlelase tsa css u sebelisa mokhoa ona.

Eketsa Tailwind CSS ka li-plugins

Tailwind CSS e ka atolosoa ka li-plugins, ho eketsa ts'ebetso e ncha kapa ho iketsetsa e teng. Ithute mokhoa oa ho sebelisa li-plugins ho holisa katleho le bokhabane ba merero ea hau ea webo.

Kenyelletsa Tailwind CSS ho Mosebetsi oa Hao oa Mosebetsi

Ho kopanya Tailwind CSS mosebetsing oa hau oa nts'etsopele ho hlakile, ebang u sebelisa lisebelisoa tsa ho haha ​​​​tse kang Webpack kapa Parcel, kapa ho sebetsa ka meralo e kang Next.js kapa Gatsby.

Ntlafatsa phihlello ka Tailwind CSS

Tailwind CSS e khothaletsa moralo o fumanehang ka ho kenyelletsa mefuta e mengata ea ARIA lihlopheng tsa eona. Theha lihokelo tse fumanehang habonolo 'me u ntlafatse boiphihlelo ba mosebelisi bakeng sa motho e mong le e mong.

Kopanya Matla a Flexbox le Grid ka Tailwind CSS

Sebetsa ka matla li-module tsa sejoale-joale tsa CSS joalo ka Flexbox le Grid e nang le Tailwind CSS. Ithute hore na litlelase tsa lisebelisoa li ka sebelisoa joang ho laola sebopeho ka mokhoa o tenyetsehang le o arabelang.

Mokhoa oa ho lokisa merero ea hau ea Tailwind CSS

Tailwind CSS e fana ka lisebelisoa tse 'maloa tsa ho lokisa liphoso le mekhoa e nolofalletsang ho tseba le ho rarolla mathata a setaele. Utloisisa lisebelisoa tsena 'me u ntlafatse tsebo ea hau ea ho lokisa liphoso.

Theha Websaete e mebala-bala ka Tailwind CSS

Tailwind CSS e tla le pente e pharaletseng ea mebala eo u ka e khethang. Ithute ho sebelisa le ho hlophisa mebala ena ho etsa meralo e khahlang le e khahlang mahlo.

Ntlafatsa ka potlako ka Tailwind CSS' JIT Mode

Kena ka botebo ka mokhoa oa Just-In-Time oa Tailwind CSS. Utloisisa hore na e sebetsa joang le hore na e ka potlakisa nts'etsopele ea hau joang le ho aha linako.

Ho tloha ho Zero ho ea ho Hero: Master Tailwind CSS

Qala leeto la ho ithuta Tailwind CSS. Ho tloha ho theha tikoloho ea hau ho ea ho hlahloba lihlooho tse tsoetseng pele, tataiso ena e batsi e u koahetse.

Iketsetse Tailwind CSS ho latela Litlhoko tsa Hao

E 'ngoe ea matla a maholo a Tailwind CSS ke ho tenyetseha ha eona. Ithute mokhoa oa ho etsa Tailwind hore e lumellane le litlhoko tse ikhethileng tsa projeke ea hau.

Ho Kopana le Tailwind CSS

Kenya letsoho thutong ea matsoho ka letoto la mehlala e sebetsang. Lekola mokhoa oa ho aha likarolo tse fapaneng tsa marang-rang u sebelisa Tailwind CSS le DaisyUI.

Ho falla ho tloha ho Mekhatlo e meng ea CSS ho ea ho Tailwind CSS

Na u nahana ho fetohela ho Tailwind CSS? Utloisisa phapang ea bohlokoa lipakeng tsa Tailwind le meralo e meng, 'me u ithute maano a sebetsang a ho fallisa merero ea hau.

U ka sebelisa DivMagic kapa lisebelisoa tse tšoanang ho eketsa lebelo la hau la ho falla haholo.

Lisebelisoa tsa nts'etsopele ea webo joalo ka DivMagic li u lumella ho kopitsa sebopeho sefe kapa sefe le setaele sefe kapa sefe ho tsoa webosaeteng efe kapa efe ka tobetsa e le 'ngoe.

Mohlala o Bonolo: Ho aha Karolo ea Karete e Arabang

Mohlala ke ona oa kamoo u ka ahang karolo ea karete e arabelang u sebelisa Tailwind CSS. Karolo ena e tla ba le setšoantšo, sehlooho le tlhaloso.

<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>

Ho aha Foromo ka Tailwind CSS

Ho theha foromo ka Tailwind CSS ho bonolo ebile ho bonolo. Foromo e bonolo ea ho ikopanya ke ena:

<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>

Customizing Tailwind CSS

Tailwind CSS e u lumella hore u iketsetse tlhophiso ea eona ea kamehla, u hlophise litlelase tsa ts'ebeliso ho latela litlhoko tsa hau. Ka tlase mona ho na le mohlala oa mokhoa oa ho etsa pente ea mebala.

Mehlala ena e bonts'a ho feto-fetoha ha maemo le bonolo ba Tailwind CSS, ho bonts'a hore na ba ka u thusa joang ho theha likarolo tsa marang-rang tsa sejoale-joale, tse arabelang hantle le ka nepo.

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

Ke tla hloka faele efe kapa efe ea CSS?

Faele e le 'ngoe feela eo u e hlokang ka Tailwind CSS ke faele ea tailwind.config.js.

Faele eo e tla boloka litlhophiso tsa hau tsa tlhophiso. U ke ke ua ngola css kapa ua ba le faele e 'ngoe ea css. Faele ena ea tlhophiso ke eona feela eo u tla e hloka.

Mekhoa e metle ea Tailwind CSS ke efe?

Bakeng sa tlhaloso e qaqileng mabapi le mekhoa e metle ea Tailwind CSS, ka kopo bona sengoloa sa rona se seng Tailwind CSS Best Practices.

Tailwind CSS: Bokamoso ba Web Design

Nahana kamoo Tailwind CSS e bopang bokamoso ba moralo oa webo. Ithute ka tšusumetso ea eona le monyetla oa kholo ea indasteri ea ntlafatso ea webo.