Tailwind CSS - Aga diwepesaete tša sebjalebjale ka lebelo ntle le go tlogela HTML ya gago

Hlama Meralo ye e Raraganego ka Bonolo

Ka Tailwind CSS, go hlama meralo ye e raraganego e ba phefo. Motswako wa dihlopha tša ditirelo le didirišwa tša go hlama tše di arabelago o go dumelela go hlama dipeakanyo tše di raraganego gabonolo, ntle le go senya tshepedišo le go hlokomelwa ga weposaete ya gago.

Aga selo le ge e le sefe

Botle bja Tailwind CSS bo letše go feto-fetoga ga yona. O ka hlama selo se sengwe le se sengwe go tšwa go letlakala le bonolo la blog go ya go sefala sa kgwebo ya inthanete ya maemo a godimo, ka moka ge o dutše o šomiša diklase tša utility tše di swanago tše di kwešišegago.

O lekanyeditšwe feela ke monagano wa gago. Phapano ye kgolo go tšwa go go šomiša Vanilla CSS ke lebelo leo o ka agago meralo ya tlwaelo ka lona.

Mokgwa wa setšo wa go šomiša diklase tša css tša tlwaelo ka dikarolo tša html go swana le div, div class, p class ke kgetho ka mehla eupša kaonafatšo ya lebelo yeo e tlago le Tailwind CSS e dira gore bophelo bja gago bo be bonolo.

Mekgwa e mebotse ga e šome e le ka kgonthe

Ka setšo, CSS e ngwalwa ka go hloma sete ya mekgwa ya lefase ka bophara le go e hlwekišwa motheong wa karolo ka karolo. Le ge wo e le mokgwa o tumilego, o ka lebiša go khoutu e kgolo, yeo go lego thata go e hlokomela.

Tailwind CSS e hlohla kgopolo ye, e phega kgang ya gore CSS ya utility-first e fa tharollo ye e hlwekilego, ye e hlokomelwago kudu.

Bokgobapuku bja dikarolo bjo bo tumilego kudu bja Tailwind CSS

daisyUI ke bokgobapuku bjo bo tumilego kudu bja dikarolo bakeng sa Tailwind CSS, bo ikgantšha ka dikarolo tše fetago tše 50 tšeo di hlamilwego pele, diklase tša 500+ tša utility, le dikgonagalo tšeo di nyakilego di sa fele. E go phološa go hlama leotwana gape nako le nako ge o hlama projeke ye mpsha.

O se ke wa Hlama Leotwana Bofsa Nako le Nako

Go e na le go senya nako ya gago ka tshepedišo ye e lapišago ya go ngwala maina a diklase a mantši bakeng sa projeke ye nngwe le ye nngwe ye mpsha, Tailwind CSS e go kgontšha go šomiša sete ye e hlalošitšwego gabotse, ya semantiki ya diklase tša mohola.

Diklase tše di šomišwa gape gomme di šoma ka kwano le cascade ya CSS, di go fa motheo wo o tiilego wa diprotšeke tša gago ka moka.

Tailwind CSS - Tlhako ya CSS ya Pele ya Utility

Motheong wa yona, Tailwind CSS ke tlhako ya CSS ya utility-pele. Se se ra gore e fana ka diklase tša mohola tša maemo a fase, tšeo di ka hlangwago tšeo o ka di šomišago go aga tlhamo efe goba efe, thwii ka go HTML ya gago. Ga go sa na difaele tša CSS tšeo di sa felego, khoutu e bonolo le e kwešišegago feela.

Šomiša Maina a Sehlopha sa Semantiki

Maina a dihlopha tša semantiki a kaonafatša go balwa ga khoutu ya gago, go dira gore go be bonolo go kwešiša seo sehlopha se se itšego se se dirago ka go lebelela leina la sona fela. Ye ke ye nngwe ya dikarolo tše ntši tšeo Tailwind CSS e di amogetšego go kaonafatša boitemogelo bja mogaši.

CSS e hlwekilego. Tlhako Agnostic. E Šoma Gohle

Tailwind CSS ga e go tleme go tlhako efe goba efe ye e itšego. It’s simply pure CSS, ka fao o ka e šomiša le tlhako efe goba efe, goba le ge e se na tlhako le gatee. E šoma kae le kae moo CSS e šomago gona.

Mehola ya Tailwind CSS

Mehola ya go šomiša Tailwind CSS e akaretša tšweletšo ye e oketšegilego, bogolo bja faele ya CSS ye e fokotšegilego, le maitemogelo a motšweletši a kaonafaditšwego ka lebaka la mokgwa wa go thoma ka mohola. Go tlaleletša, mokgwa wa Just-In-Time (JIT) o fa dinako tša go aga ka lebelo la legadima, go akgofiša gape tshepedišo ya gago ya tlhabollo.

Theko ya CSS ya Mosela wa Mosela

Tailwind CSS ke projeke ya mohlodi o bulegilego, seo se ra gore e lokologile ka mo go feletšego go e diriša. Ditshenyagalelo di tla ge o nyaka go fihlelela dikarolo tša maemo a godimo go swana le dikarolo tša UI le dithempleite, tšeo di fiwago ka UI ya Tailwind.

E na le dikgopolo le go fetofetoga ka nako e tee

Tailwind CSS e fana ka kgopolo ye maatla ya gore o ka rulaganya bjang CSS ya gago, le ge go le bjalo it’s flexible enough to allow customization. Tekatekano ye e go kgontšha go tsepamiša kgopolo go seo se lego bohlokwa kudu — go aga di-UI tše botse.

Dikarolo tša sebjalebjale

Tailwind CSS e akaretša dikarolo tša sebjalebjale tša go swana le Flexbox, Grid, le dithoto tša tlwaelo, e dira gore e be kgetho ye botse kudu ya go hlabolla dikgopelo tša wepe tša sebjalebjale.

Dinyakwa tša pele tša go Šomiša Tailwind CSS

Pele o thoma go šomiša Tailwind CSS, o hloka kwešišo ya motheo ya HTML le CSS.

Neng o swanetše go Šomiša Tailwind CSS

Tailwind CSS e loketše mehuta ka moka ya diprotšeke tša wepe, tše kgolo goba tše nnyane. If you’re tired of wrestling with CSS and o nyaka tharollo ye e šomago gabotse kudu, ye e nago le bogwera bja bahlami, gona Tailwind CSS ke ya gago.

E sego ka gare ga ditlhako tša dikarolo?

Ge e ba o se morati wa ditlhako tša dikarolo tša go swana le React goba Vue, ga go na matshwenyego. Tailwind CSS ke tlhako-agnostic gomme e ka šomišwa ka HTML ye e hlwekilego le JavaScript.

Go swana le Diphapano Magareng ga Tailwind CSS le Ditlhako tše dingwe tša CSS

Le ge ditlhako tše dingwe tša go swana le Bootstrap le Foundation di fa dikarolo tše di hlamilwego pele, Tailwind CSS e go fa didirišwa tša go aga meralo ya tlwaelo ka botlalo ntle le go tlogela HTML ya gago. Le ge go le bjalo, ka kopanyo ya makgobapuku a dikarolo go swana le daisyUI, bjale o ka thabela tše kaone tša mafase ka bobedi.

Mokgwa wa Lefifi

E nngwe ya dikarolo tša moragorago tša Tailwind CSS le daisyUI ke mokgwa wa lefsifsi, wo o go kgontšhago go hlama diwepesaete tša sehlogo se se lefsifsi ntle le maiteko.

Mohlala wa Flexbox

Tailwind CSS e kopanya gabotse le dikarolo tša sebjalebjale tša CSS go swana le Flexbox. Go fa mohlala, o ka hlama peakanyo ye e arabelago o omia diklase ta go swana le flex, justify- center, items-center, bjalobjalo.

Ka kopanyo ya Just-in-Time, o ka leka dikelo tša sehlopha sa utility tše di fapanego gabonolo. Ge e le gore sehlopha se tee sa utility se be se sa šome, e no se fetole go tlwaetša elemente ya gago.

Mohlala wa Peakanyo ya Flexbox

Ka go šomiša Tailwind CSS, go bonolo go hlama dipeakanyo tše di raraganego go swana le baara ya go sepelasepela ye e arabelago. Mohlala ke wo:

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

Dikarolo tše di lokišitšwego

Ge e ba o tšere sephetho sa go diriša khoutu ya css ya tailwind mo porojekeng ya gago, o tla kgona go hwetša dikarolo tše dintši tša premade inthaneteng. O ka kopiša efe goba efe ya tše gomme wa ikgethela weposaete ya gago.

Tsela ya go fetolela CSS go Tailwind CSS

Go kgona go fetolela CSS go diklase tša Tailwind CSS ke selo seo bontši bja bahlami ba se hlokago. Go na le diwepesaete tše ntši inthaneteng tšeo di agilwego pele ga ge Tailwind CSS e le gona. Matlakala a a wepe a šomiša css ka letlakala la setaele gomme ditsebi tša tlhabollo ya wepe di nyaka go hudušetša matlakala a go Tailwind CSS.

DivMagic ke sedirišwa sa tlhabollo ya wepe seo se agilwego bakeng sa mogaši wa wepe le bahlami ba disoftware. E dumelela setaele sefe goba sefe go kopišwa go tšwa go vanilla css go ya go Tailwind CSS. Ka go klika ga tee, o ka fetolela karolo efe goba efe inthaneteng go Tailwind CSS gomme wa šomiša Tailwind mo porojekeng ya gago gomme wa ikgethela setaele ka tsela efe goba efe yeo o e nyakago.

Dive Tebileng ka Tailwind CSS Filosofi

Filosofi yeo e lego ka morago ga Tailwind CSS ke go tsepelela go utility. Se se ra gore go e na le go hlaloša pele diklase tša dikarolo, Tailwind CSS e fa diklase tša mohola tša maemo a fase tšeo di go kgontšhago go aga meralo ya moswananoši ntle le go tlogela HTML ya gago.

Ke ka Baka La’ng o Kgole go CSS ya Setšo?

CSS ya setšo e ka hlola tšhomišo ye e feteletšego ya go phaela ka thoko, difaele tše di budulego, le 'sopo ya div'. Ka go šuthišetša go tlhako ya CSS ya utility-first go swana le Tailwind CSS, o ka fokotša ditaba tše, go feletša ka codebase ye e hlwekilego, ye e nolofaditšwego kudu.

Itemogele Matla a Diklase tša Utility

Diklase tša mohola di go thuša go efoga go boeletša ditaele tše di swanago go ralala le matlakala a gago a ditaele. Ke molaotheo wa "Don’t Repeat Yourself" (DRY). Diklase tše di go bolokela nako ye bohlokwa le maiteko gomme di lebiša go codebase yeo e hlokomelwago kudu.

Go Hlahloba Ditaelo tša CSS tša Mosela wa Mosela

Tailwind CSS e tsebagatša ditaelo tše mmalwa tšeo di ka šomišwago ka gare ga matlakala a gago a setaele. Tše di akaretša @apply , @variants , le @screen. Go kwešiša le go šomiša ditaelo tše go ka godiša kudu maitemogelo a gago a Tailwind CSS. Tše di ka bewa ka gare ga faele ya CSS ya Tailwind Config. O ka ngwala diklase tša css o šomiša mokgwa wo.

Atološa Tailwind CSS ka Di-Plugin

Tailwind CSS e ka katološwa ka di-plugin, ya oketša mošomo o mofsa goba go ikgethela yeo e lego gona. Ithute ka moo o ka dirišago di-plugin go godiša bokgoni le botsebi bja diprotšeke tša gago tša wepe.

Tsenya Tailwind CSS ka gare ga Tshepetšo ya Gago ya Mošomo

Go kopanya Tailwind CSS ka gare ga tshepedišo ya gago ya mošomo ya tlhabollo go otlologile, go sa šetšwe gore o šomiša didirišwa tša go aga go swana le Webpack goba Parcel, goba o šoma ka ditlhako tša go swana le Next.js goba Gatsby.

Godiša Phihlelelo ka Tailwind CSS

Tailwind CSS e hlohleletša tlhamo ye e fihlelelwago ka go akaretša mohuta wa dika tša ARIA ka diklaseng tša yona. Hlama didirišwa tša go dirišana tše di fihlelelwago kudu le go godiša boitemogelo bja mosediriši go bohle.

Diriša Matla a Flexbox le Grid ka Tailwind CSS

Diriša dimmojule tša peakanyo ya CSS ya sebjalebjale go swana le Flexbox le Grid ka Tailwind CSS. Ithute ka moo diklase tša mohola di ka šomišwago go laola peakanyo ka mokgwa wo o fetofetogago le go arabela.

Tsela ya go Lokiša Diphošo tša gago tša Tailwind CSS

Tailwind CSS e fana ka didirišwa tše mmalwa tša go lokiša diphošo le dithekniki tšeo di dirago gore go hlaola le go rarolla ditaba tša setaele go be bonolo. Kwešiša didirišwa tše gomme o godiše bokgoni bja gago bja go lokiša diphošo.

Hlama Wepe ya Mebalabala ka CSS ya Mosela wa Mosela

Tailwind CSS e tla le phalete e sephara ya mebala yeo e ka fetošwago. Ithute ka moo o ka šomišago le go dira gore mebala ye e be ya gago go hlama meralo ye e phelago le ye e kgahlišago ka pono.

Hlabolla ka lebelo ka Mokgwa wa JIT wa Tailwind CSS

Delve ka mo go tseneletšego ka mokgwa wa Tailwind CSS wa Just-In-Time. Kwešiša ka fao e šomago ka gona le ka fao e ka akgofišago kudu tlhabollo ya gago le go aga dinako.

Go tloga go Lefela go ya go Mogale: Master Tailwind CSS

Thoma leeto la go tseba Tailwind CSS gabotse. Go tloga go hlomeng tikologo ya gago go ya go go hlahloba dihlogo tše di tšwetšego pele, tlhahlo ye e feletšego e go akaretša.

Tlwaetša Tailwind CSS go ya ka Dinyakwa tša Gago

E nngwe ya matla a magolo a Tailwind CSS ke go feto-fetoga ga yona. Ithute ka moo o ka tlwaetšago Tailwind gore e swane le dinyakwa tše di kgethegilego tša projeke ya gago.

Go hwetša diatla-ka ka Tailwind CSS

Kgatha tema go ithuteng ka diatla ka lelokelelo la mehlala ye e šomago. Hlahloba ka moo o ka agago dikarolo tša wepe tša go fapafapana ka go šomiša Tailwind CSS le DaisyUI.

Go huduga go tšwa go Ditlhako tše dingwe tša CSS go ya go Tailwind CSS

Na o nagana go fetogela go Tailwind CSS? Kwešiša diphapano tše bohlokwa magareng ga Tailwind le ditlhako tše dingwe, gomme o ithute maano ao a šomago gabotse a go huduša diprotšeke tša gago.

O ka šomiša DivMagic goba didirišwa tše di swanago go oketša kudu lebelo la gago la go huduga.

Didirišwa tša tlhabollo ya wepe tša go swana le DivMagic di go dumelela go kopiša elemente efe goba efe tlhamo efe goba efe le setaele sefe goba sefe go tšwa go weposaete efe goba efe ka go kgotla ga tee.

Mohlala o Bonolo: Go aga Karolo ya Karata ye e Arabelago

Mohlala ke wo wa ka moo o ka agago karolo ya karata ye e arabelago ka go šomiša Tailwind CSS. Karolo ye e tla ba le seswantšho, thaetlele, le tlhalošo.

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

Go aga Foromo ka Tailwind CSS

Go hlama foromo ka Tailwind CSS go otlologile ebile go a kwešišega. Foromo e bonolo ya go ikgokaganya ke ye:

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

Go dira gore CSS ya Tailwind e be ya gago

Tailwind CSS e go dumelela go ikgethela peakanyo ya yona ya go se fetoge, e rulaganya diklase tša utility go ya ka dinyakwa tša gago. Ka tlase ther eis mohlala wa kamoo ho customize phalete mebala.

Mehlala ye e bontšha go fetofetoga le maemo le go ba bonolo ga Tailwind CSS, e bontšha ka moo e ka go thušago go hlama dikarolo tša wepe tša sebjalebjale, tše di arabelago ka bokgoni le ka mo go atlegilego.

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

Na ke tla hloka faele efe kapa efe ya CSS?

Faele e nnoši yeo o e hlokago ka Tailwind CSS ke faele ya tailwind.config.js.

Faele yeo e tla swara dipeakanyo tša gago tša peakanyo. O ka se be o ngwala css goba wa ba le faele efe goba efe ye nngwe ya css. Faele ye ya peakanyo ke yona feela yeo o tlago go e hloka.

Ke mekgwa efe e mebotse ya Tailwind CSS?

Bakeng sa tlhalošo ye e tletšego ka ga mekgwa ye mebotse ya Tailwind CSS, hle bona sehlogo sa rena se sengwe sa Mekgwa ye Mebotse ya Tailwind CSS.

Tailwind CSS: Bokamoso bja Moralo wa Wepesaete

Naganišiša ka fao Tailwind CSS e bopago bokamoso bja tlhamo ya wepe. Ithute ka ga khuetšo ya yona le bokgoni bja kgolo ka intastering ya tlhabollo ya wepe.