Tailwind CSS - Aka tiwebsite ta manguva lawa hi ku hatlisa handle ko siya HTML ya wena

Endla Tidizayini Leti rharhanganeke Hi Ku Olova

Hi Tailwind CSS, ku tumbuluxa tipulani to rharhangana swi hundzuka moya wo olova. Ku hlanganisiwa ka titlilasi ta switirhisiwa na switirhisiwa swa dizayini leswi hlamulaka swi ku pfumelela ku dizayina swivumbeko leswi rharhanganeke hi ku olova, handle ko kavanyeta matirhelo na ku hlayisiwa ka webusayiti ya wena.

Aka xin’wana ni xin’wana

Ku saseka ka Tailwind CSS ku le ka ku cinca-cinca ka yona. U nga tumbuluxa xin’wana na xin’wana ku suka eka tluka ro olova ra blog ku ya eka pulatifomo ya e-commerce ya xiyimo xa le henhla, hinkwaswo loko u ri karhi u tirhisa titlilasi ta vukorhokeri leti fanaka leti twisisekaka.

U pimiwile ntsena hi miehleketo ya wena. Ku hambana lokukulu na ku tirhisa Vanilla CSS i rivilo leri u nga aka tipulani ta ntolovelo ha rona.

Endlelo ra ndhavuko ro tirhisa titlilasi ta css ta ntolovelo leti nga na swiphemu swa html swo fana na div, div class, p class minkarhi hinkwayo i xihlawuhlawu kambe ku antswisiwa ka rivilo loku taka na Tailwind CSS ku olovisa vutomi bya wena.

Maendlelo lamanene entiyisweni a ma tirhi

Hi ndhavuko, CSS yi tsariwa hi ku simeka sete ya switayele swa misava hinkwayo na ku swi antswisa hi ku ya hi xiphemu hi xiphemu. Hambileswi leyi ku nga ndlela leyi dumeke, yi nga endla leswaku ku va ni khodi leyikulu, leyi swi nonon’hwaka ku yi hlayisa.

Tailwind CSS yi tlhontlha mianakanyo leyi, yi vula leswaku utility-first CSS yi nyika ntlhantlho lowu tengeke, lowu hlayisiwaka swinene.

Layiburari ya swiphemu leyi dumeke swinene ya Tailwind CSS

daisyUI i layiburari ya swiphemu leyi dumeke swinene ya Tailwind CSS, leyi tibumaka hi swiphemu swo tlula 50 leswi endliweke ka ha ri emahlweni, 500+ wa titlilasi ta vukorhokeri, na ku koteka loku nga heriki. Swi ku ponisa eka ku tlhela u tumbuluxa vhilwa nkarhi wun’wana na wun’wana loko u tumbuluxa phurojeke leyintshwa.

U Nga Tsunguli Vhilwa Hi Vuntshwa Nkarhi Hinkwawo

Ematshan’wini yo tlanga hi nkarhi wa wena hi endlelo ro karharisa ro tsala mavito yo tala ya titlilasi eka phurojeke yin’wana na yin’wana leyintshwa, Tailwind CSS yi ku pfuna ku tirhisa sete leyi hlamuseriweke kahle, ya nhlamuselo ya titlilasi ta vukorhokeri.

Titlilasi leti ti tirhisiwa nakambe naswona ti tirha hi ku twanana na CSS cascade, ti ku nyika masungulo yo tiya eka tiphurojeke ta wena hinkwato.

Tailwind CSS - Xitirhisiwa xo Sungula xa Rimba ra CSS

Eka xisekelo xa yona, Tailwind CSS i rimba ra CSS ro sungula ra vukorhokeri. Leswi swi vula leswaku yi nyika titlilasi ta vukorhokeri bya xiyimo xa le hansi, leti nga hlanganisiwaka leti u nga ti tirhisaka ku aka dizayini yin’wana na yin’wana, hi ku kongoma eka HTML ya wena. Ku hava tifayela ta CSS leti nga heriki, ntsena khodi yo olova ni leyi twisisekaka.

Tirhisa Mavito ya Tlilasi ya Semantiki

Mavito ya titlilasi ta semantiki ya antswisa ku hlayeka ka khodi ya wena, leswi endlaka leswaku swi olova ku twisisa leswi tlilasi yo karhi yi swi endlaka hi ku languta vito ra yona ntsena. Lexi i xin’wana xa swihlawulekisi swo tala leswi Tailwind CSS yi swi amukeleke ku antswisa ntokoto wa vaendli.

CSS yo basa. Rimba ra Agnostic. Swi Tirha Hinkwako-nkwako

Tailwind CSS a yi ku bohi eka rimba ro karhi. It’s simply pure CSS, so u nga yi tirhisa na framework yin’wana na yin’wana, kumbe hambi ku ri ku nga ri na framework nikatsongo. Swi tirha hinkwako laha CSS yi tirhaka kona.

Mimbuyelo ya Tailwind CSS

Mimbuyelo ya ku tirhisa Tailwind CSS yi katsa ku engeteleriwa ka vuhumelerisi, ku hungutiwa ka mpimo wa fayili ya CSS, na ntokoto lowu antswisiweke wa muendli hikwalaho ka endlelo ro sungula eka vukorhokeri. Ku engetela kwalaho, movha wa Just-In-Time (JIT) wu nyika minkarhi yo aka leyi hatlisaka ku fana na rihati, leswi yaka emahlweni swi hatlisisa endlelo ra wena ra nhluvukiso.

Ntsengo wa CSS wa Tailwind

Tailwind CSS i phurojeke ya xihlovo lexi pfulekeke, leswi vulaka leswaku yi ntshunxekile hi ku helela ku yi tirhisa. Ndleko wu ta loko u lava ku fikelela swihlawulekisi swa xiyimo xa le henhla swo fana na swiphemu swa UI na tithempleyiti, leswi nyikiwaka hi ku tirhisa Tailwind UI.

Yi na mavonelo naswona yi cinca-cinca hi nkarhi wun’we

Tailwind CSS yi nyika mavonelo yo tiya eka ndlela yo hlela CSS ya wena, hambiswiritano yi cinca-cinca ku ringana ku pfumelela ku cinca-cinca. Ku ringanisela loku ku endla leswaku u kota ku kongomisa eka leswi nga swa nkoka swinene — ku aka ti-UI to saseka.

Swihlawulekisi swa manguva lawa

Tailwind CSS yi amukela swihlawulekisi swa manguva lawa swo fana na Flexbox, Grid, na swihlawulekisi swa ntolovelo, leswi endlaka leswaku yi va nhlawulo wa kahle swinene wo tumbuluxa switirhisiwa swa webu swa manguva lawa.

Swilaveko swa le mahlweni swo tirhisa Tailwind CSS

Loko u nga si sungula ku tirhisa Tailwind CSS, u lava ku twisisa ka xisekelo ka HTML na CSS.

Rini Ku Tirhisa Tailwind CSS

Tailwind CSS yi lulamerile eka tinxaka hinkwato ta tiphurojeke ta webu, letikulu kumbe letitsongo. Loko u karhele ku wrestling na CSS naswona u lava xitshunxo lexi tirhaka kahle, lexi nga na xinghana eka vatumbuluxi, kutani Tailwind CSS i ya wena.

A hi eka swivumbeko swa swiphemu?

Loko u nga ri muyingiseri wa ti component frameworks to fana na React kumbe Vue, a wu vileli. Tailwind CSS i framework-agnostic naswona yi nga tirhisiwa na HTML yo basa na JavaScript.

Ku fana na ku hambana exikarhi ka Tailwind CSS na Swivumbeko Swin’wana swa CSS

Loko swivumbeko swin’wana swo fana na Bootstrap na Foundation swi nyika swiphemu leswi endliweke ka ha ri emahlweni, Tailwind CSS yi ku nyika switirhisiwa swo aka tipulani ta ntolovelo hi ku helela handle ko siya HTML ya wena. Hambiswiritano, hi ku hlanganisiwa ka tilayiburari ta swiphemu to fana na daisyUI, sweswi u nga tiphina hi leswinene swa misava leyimbirhi.

Mode ya Munyama

Xin’wana xa swihlawulekisi swa sweswinyana swa Tailwind CSS na daisyUI i movha wa munyama, lowu endlaka leswaku u kota ku endla tiwebsite ta nhlokomhaka ya munyama handle ko endla matshalatshala.

Xikombiso xa Flexbox

Tailwind CSS yi hlanganisa kahle na swihlawulekisi swa CSS swa manguva lawa swo fana na Flexbox. Xikombiso, u nga endla xivumbeko lexi hlamulaka hi ku tirhisa titlilasi to fana na flex, justify- center, items-center, na swin’wana.

Hi ku hlanganisiwa ka Just-in-Time, u nga ringeta mimpimo yo hambana ya tlilasi ya vukorhokeri hi ku olova. Loko tlilasi yin’we ya vukorhokeri yi nga tirhanga, yi cince ntsena leswaku yi endla leswaku elemente ya wena yi va ya wena.

Xikombiso xa Xivumbeko xa Flexbox

Hi ku tirhisa Tailwind CSS, swa olova ku tumbuluxa swivumbeko leswi rharhanganeke ku fana na bar ya ku fambafamba leyi hlamulaka. Hi lexi xikombiso:

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

Swiphemu leswi lunghekeleke

Loko u teke xiboho xo tirhisa khodi ya tailwind css eka phurojeke ya wena, u ta kota ku kuma swiphemu swo tala swa premade eka inthanete. U nga kopa xin’wana ni xin’wana xa leswi ivi u xi endla leswaku u va webusayiti ya wena n’wini.

Ndlela yo hundzuluxa CSS ku va Tailwind CSS

Ku kota ku hundzuluxa CSS yi va titlilasi ta Tailwind CSS i nchumu lowu vaendli vo tala va wu lavaka. Kuna ti website to tala eka internet leti akiweke loko Tailwind CSS yinga se va kona. Matluka lawa ya webu ya tirhisa css na stylesheet naswona vativi va nhluvukiso wa webu va lava ku rhurhela matluka lawa eka Tailwind CSS.

DivMagic i xitirhisiwa xa nhluvukiso wa webu lexi akiweke eka vaendli va webu na vaendli va software. Yi pfumelela xitayili xin’wana na xin’wana ku kopiwa ku suka eka vanilla css ku ya eka Tailwind CSS. Hi ku tikhoma kan’we, u nga hundzuluxa xiphemu xin’wana na xin’wana eka inthanete ku va Tailwind CSS ivi u tirhisa Tailwind eka phurojeke ya wena no endla leswaku xitayili xi va hi ndlela yihi na yihi leyi u yi lavaka.

Dive Deep eka Filosofi ya Tailwind CSS

Filosofi ya Tailwind CSS i ku kongomisa eka vukorhokeri. Leswi swi vula leswaku ematshan’wini yo hlamusela ka ha ri emahlweni titlilasi ta swiphemu, Tailwind CSS yi nyika titlilasi ta vukorhokeri bya xiyimo xa le hansi leti ku pfunaka ku aka tipulani to hlawuleka handle ko siya HTML ya wena.

Ha Yini U Suka Eka CSS Ya Ndhavuko?

CSS ya ndhavuko yi nga ha vanga ku tirhisiwa ngopfu ka ku tlula, tifayela leti pfurhaka, na ‘div soup’. Hi ku cincela eka rimba ra CSS ra vukorhokeri byo sungula ku fana na Tailwind CSS, u nga hunguta timhaka leti, leswi endlaka leswaku ku va na khodi leyi tengeke, leyi olovisiweke swinene.

Tiva Matimba ya Titlilasi ta Switirhisiwa

Titlilasi ta vukorhokeri ti ku pfuna ku papalata ku phindha switayele leswi fanaka eka switayele swa wena hinkwaswo. I nsinya wa nawu wa "Don’t Repeat Yourself" (DRY). Titlilasi leti ti ku hlayisela nkarhi na matshalatshala ya nkoka naswona ti yisa eka codebase leyi hlayisiwaka swinene.

Ku lavisisa Swiletelo swa Tailwind CSS

Tailwind CSS yi nghenisa swiletelo swi nga ri swingani leswi nga tirhisiwaka endzeni ka switayele swa wena. Leswi swi katsa @apply , @variants , na @screen. Ku twisisa na ku tirhisa swiletelo leswi swi nga ndlandlamuxa swinene ntokoto wa wena wa Tailwind CSS. Leswi swi nga vekiwa eka fayili ya Tailwind Config CSS. U nga tsala titlilasi ta css hi ku tirhisa endlelo leri.

Engetela Tailwind CSS hi Tiplagini

Tailwind CSS yinga engeteriwa hi ti plugins, ku engetela ntirho wuntshwa kumbe ku lulamisa lowu nga kona. Dyondza ndlela yo tirhisa ti-plugin ku kurisa vukorhokeri na vuxongi bya tiphurojeke ta wena ta webu.

Nghenisa Tailwind CSS eka Ntirho wa Wena

Ku hlanganisa Tailwind CSS eka maendlelo ya wena ya ntirho wa nhluvukiso swi olovile, hambi u tirhisa switirhisiwa swo aka swo fana na Webpack kumbe Parcel, kumbe ku tirha na swivumbeko swo fana na Next.js kumbe Gatsby.

Nantswisa Ku Fikeleleka hi Tailwind CSS

Tailwind CSS yi hlohlotela dizayini leyi fikelelaka hi ku katsa nxaxamelo wa swihlawulekisi swa ARIA eka titlilasi ta yona. Endla swihlanganisi leswi fikelelaka swinene na ku ndlandlamuxa ntokoto wa mutirhisi eka un’wana na un’wana.

Tirhisa Matimba ya Flexbox na Grid hi Tailwind CSS

Tirhisa mimojula ya maendlelo ya CSS ya manguva lawa yo fana na Flexbox na Grid na Tailwind CSS. Dyondza ndlela leyi titlilasi ta vukorhokeri ti nga tirhisiwaka ha yona ku lawula maendlelo hi ndlela leyi cinca-cincaka na ku hlamula.

Ndlela Yo Debug Tiphurojeke Ta Wena Ta Tailwind CSS

Tailwind CSS yi nyika switirhisiwa swo hlayanyana swo lulamisa swihoxo na tithekiniki leti endlaka leswaku ku kuma na ku tlhantlha timhaka ta xitayili swi olova. Twisisa switirhisiwa leswi naswona u ndlandlamuxa vuswikoti bya wena byo lulamisa swihoxo.

Endla Webu ya Mihlovo-hlovo hi Tailwind CSS

Tailwind CSS yi ta na phalete yo anama ya mihlovo leyi nga cinciwaka. Dyondza ndlela yo tirhisa ni ku endla mihlovo leyi hi ku ya hi swilaveko swa wena leswaku u endla tipulani leti hanyaka ni leti tsakisaka hi mahlo.

Hlakulela hi ku hatlisa hi Tailwind CSS' JIT Mode

Nghena swinene eka movha wa Tailwind CSS wa Just-In-Time. Twisisa ndlela leyi swi tirhaka ha yona na ndlela leyi swi nga hatlisisaka swinene nhluvukiso wa wena na ku aka minkarhi.

Ku suka eka Zero ku ya eka Hero: Master Tailwind CSS

Sungula riendzo ro va na vutshila eka Tailwind CSS. Ku suka eka ku veka ndhawu ya wena ku ya eka ku lavisisa tinhlokomhaka ta xiyimo xa le henhla, nkongomiso lowu lowu heleleke wu ku hlanganisile.

Endla Tailwind CSS hi ku ya hi Swilaveko swa Wena

Yin’wana ya matimba lamakulu ya Tailwind CSS i ku cinca-cinca ka yona. Dyondza ndlela yo endla Tailwind yi fambisana na swilaveko swo karhi swa phurojeke ya wena.

Ku kuma Mavoko hi Tailwind CSS

Nghenela eka dyondzo ya mavoko hi ku tirhisa nxaxamelo wa swikombiso leswi tirhaka. Languta ndlela yo aka swiphemu swo hambana swa webu hi ku tirhisa Tailwind CSS na DaisyUI.

Ku rhurhela eka Swivumbeko Swin’wana swa CSS ku ya eka Tailwind CSS

Xana u ehleketa ku cincela eka Tailwind CSS? Twisisa ku hambana ka nkoka exikarhi ka Tailwind na swivumbeko swin’wana, naswona dyondza tindlela leti tirhaka to rhurhela tiphurojeke ta wena.

U nga tirhisa DivMagic kumbe switirhisiwa swo fana na swona ku engetela swinene rivilo ra wena ro rhurhela.

Switirhisiwa swa nhluvukiso wa webu swo fana na DivMagic swi ku pfumelela ku kopa elemente yin’wana na yin’wana dizayini yin’wana na yin’wana na xitayili xin’wana na xin’wana ku suka eka webusayiti yihi na yihi hi ku tikhoma kan’we.

Xikombiso xo Olova: Ku Aka Xiphemu xa Khadi leri Hlamulaka

Hi lexi xikombiso xa ndlela leyi u nga akaka xiphemu xa khadi leri hlamulaka hi ku tirhisa Tailwind CSS. Xiphemu lexi xi ta va na xifaniso, nhlokomhaka na nhlamuselo.

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

Ku aka Fomo hi Tailwind CSS

Ku tumbuluxa fomo hi Tailwind CSS swi kongomile naswona swa twisiseka. Hi leyi fomo yo olova yo tihlanganisa:

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

Ku lulamisa CSS ya Tailwind hi ku landza swilaveko swa wena

Tailwind CSS yi ku pfumelela ku lulamisa vukorhokeri bya yona bya ntolovelo, ku lulamisa titlilasi ta vukorhokeri ku ya hi swilaveko swa wena. Laha hansi ther eis xikombiso xa ndlela yo customize phalete ya mihlovo.

Swikombiso leswi swi kombisa ku cincacinca na ku olova ka Tailwind CSS, swi kombisa hilaha swi nga ku pfunaka hakona ku tumbuluxa swiphemu swa webu swa manguva lawa, leswi hlamulaka hi ndlela leyinene na hi ndlela leyinene.

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

Xana ndzi ta lava fayili yihi na yihi ya CSS?

Fayili yin’we ntsena leyi u yi lavaka na Tailwind CSS i fayili ya tailwind.config.js.

Fayili yoleyo yi ta khoma swiyimiso swa wena swa vuhlanganisi. A wu nge tsali css kumbe u va na fayili yin'wana ya css. Fayili leyi ya vuhlanganisi hi yona ntsena leyi u nga ta yi lava.

Hi wahi maendlelo lamanene ya Tailwind CSS?

Ku kuma nhlamuselo ya vuxokoxoko eka maendlelo lamanene ya Tailwind CSS, hi kombela u vona xihloko xa hina xin’wana xa Maendlelo lamanene ya Tailwind CSS.

Tailwind CSS: Vumundzuku bya Web Design

Anakanyisisa hi ndlela leyi Tailwind CSS yi vumbeke vumundzuku bya web design. Dyondza hi nkucetelo wa yona na vuswikoti bya yona byo kula eka indasitiri ya nhluvukiso wa webu.