I-Tailwind CSS-Yakha iiwebhusayithi zanamhlanje ngokukhawuleza ngaphandle kokushiya i-HTML yakho

Yenza uYilo oluNxibelele ngokulula

Nge-Tailwind CSS, ukuyila uyilo oluntsonkothileyo kuba yimpepho. Ukudityaniswa kweeklasi eziluncedo kunye nezixhobo zoyilo eziphendulayo zikuvumela ukuba uyile uyilo oluntsonkothileyo ngokulula, ngaphandle kokuphazamisa ukusebenza kunye nokugcinwa kwewebhusayithi yakho.

Yakha nantoni na

Ubuhle beTailwind CSS ilele ekuguquguqukeni kwayo. Unokwenza nantoni na ukusuka kwiphepha lebhlog elilula ukuya kwiqonga eliphambili le-e-commerce, lonke ngelixa usebenzisa iiklasi eziluncedo ezifanayo.

Ulinganiselwe kuphela yintelekelelo yakho. Umahluko ophambili ekusebenziseni iVanilla CSS sisantya apho unokwakha khona uyilo lwesiko.

Indlela yemveli yokusebenzisa iiklasi ze-css ezinamacandelo e-html afana ne-div, iklasi ye-div, iklasi ye-p ihlala iyinketho kodwa ukuphuculwa kwesantya esiza kunye ne-Tailwind CSS kwenza ubomi bakho bube lula.

Eyona ndlela ilungileyo ayisebenzi

Ngokwesiko, i-CSS ibhalwa ngokuseka isethi yeendlela zehlabathi kunye nokuzicokisa ngokwecandelo-ngecandelo. Nangona le yindlela eyaziwayo, inokukhokelela kwikhowudi enkulu, enzima ukuyigcina.

I-Tailwind CSS icela umngeni kule ngcamango, iphikisa ukuba i-CSS yokuqala inika isicoci, isisombululo esinokugcinwa ngakumbi.

Elona thala leencwadi lidumileyo leTailwind CSS

I-daisyUI lelona thala leencwadi lidumileyo le-Tailwind CSS, liqhayisa ngaphezu kwe-50 yezinto eziyilwe kwangaphambili, iiklasi eziluncedo ezingama-500+, kunye namathuba angenasiphelo. Ikugcina ekubuyiseleni ivili ngalo lonke ixesha usenza iprojekthi entsha.

Musa ukuphinda ungenise ivili ngalo lonke ixesha

Endaweni yokuchitha ixesha lakho ngenkqubo edinayo yokubhala inkitha yamagama eklasi kwiprojekthi nganye entsha, i-Tailwind CSS ikuvumela ukuba usebenzise iiklasi eziluncedo ezichazwe kakuhle, zesemantic.

Ezi klasi zisebenziseka kwakhona kwaye zisebenza ngemvisiswano kunye neCSS cascade, zibonelela ngesiseko esomeleleyo sazo zonke iiprojekthi zakho.

Tailwind CSS - A Utility First CSS Framework

Embindini wayo, iTailwind CSS sisikhokelo seCSS esiluncedo. Oku kuthetha ukuba ibonelela ngenqanaba elisezantsi, iiklasi eziluncedo ezinokusebenziseka ongazisebenzisa ukwakha naluphi na uyilo, ngokuthe ngqo kwi-HTML yakho. Azisekho iifayile ze-CSS ezingapheliyo, ikhowudi kuphela elula kunye ne-intuitive.

Sebenzisa Amagama eKlasi yeSemantic

Amagama eklasi yeSemantic aphucula ukufundeka kwekhowudi yakho, okwenza kube lula ukuqonda ukuba yintoni eyenziwa yiklasi ethile ngokujonga igama layo. Le yenye yezinto ezininzi ezamkelwa nguTailwind CSS ukuphucula amava omphuhlisi.

I-CSS ecocekileyo. Isakhelo Agnostic. Isebenza kuyo yonke indawo

I-Tailwind CSS ayikubophelelanga kuso nasiphi na isakhelo esithile. Yi-CSS esulungekileyo, ke unokuyisebenzisa naso nasiphi na isakhelo, okanye nokuba akukho sikhokelo kwaphela. Isebenza kuyo yonke indawo apho iCSS isebenza khona.

Iinzuzo zeTailwind CSS

Izibonelelo zokusebenzisa i-Tailwind CSS ibandakanya ukunyuka kwemveliso, ukunciphisa ubungakanani befayile ye-CSS, kunye namava omphuhlisi aphuculweyo ngenxa yendlela yokusebenza yokuqala. Ukongeza, imowudi ye-Just-In-Time (JIT) ibonelela ngamaxesha okwakha ombane ngokukhawuleza, ikhawulezisa inkqubo yakho yophuhliso.

Tailwind CSS Amaxabiso

I-Tailwind CSS yiprojekthi yomthombo ovulekileyo, nto leyo ethetha ukuba isetyenziswa simahla. Iindleko ziza xa ufuna ukufikelela kwiimpawu zeprayimari ezifana nezixhobo ze-UI kunye neetemplates, ezinikezelwa nge-Tailwind UI.

Inoluvo kwaye ibhetyebhetye ngaxeshanye

I-Tailwind CSS ibonelela ngoluvo oluqinileyo malunga nendlela yokumisa iCSS yakho, kodwa ibhetyebhetye ngokwaneleyo ukuvumela ukwenziwa. Olu lungelelwano lukwenza ukuba ugxile kweyona nto ibalulekileyo - ukwakha ii-UI ezintle.

Iimpawu zangoku

I-Tailwind CSS yamkela iimpawu zangoku njengeFlexbox, iGridi, kunye neempawu zesiko, iyenza ibe lolona khetho lubalaseleyo lokuphuhlisa usetyenziso lwewebhu lwangoku.

Izinto ezifunekayo zokuSebenzisa iTailwind CSS

Ngaphambi kokuba uqale ukusebenzisa i-Tailwind CSS, udinga ukuqonda okusisiseko kwe-HTML kunye neCSS.

Usebenzisa nini iTailwind CSS

I-Tailwind CSS ifanelekile kuzo zonke iintlobo zeeprojekthi zewebhu, ezinkulu okanye ezincinci. Ukuba udiniwe kukujijisana neCSS kwaye ujonge isisombululo esisebenza ngakumbi, esinomphuhlisi, ke iTailwind CSS yeyakho.

Hayi kwizakhelo zecandelo?

Ukuba awungomlandeli wesakhelo secandelo njengeReact okanye iVue, akukho maxhala. I-Tailwind CSS yi-framework-agnostic kwaye inokusetyenziswa nge-HTML ecocekileyo kunye neJavaScript.

Ukufana kunye noMahluko phakathi kwe-Tailwind CSS kunye nezinye i-Frameworks ze-CSS

Ngelixa ezinye izikhokelo ezifana neBootstrap kunye neSiseko zibonelela ngamacandelo enziwe kwangaphambili, i-Tailwind CSS ikunika izixhobo zokwakha uyilo lwesiko ngokupheleleyo ngaphandle kokushiya i-HTML yakho. Nangona kunjalo, ngokudityaniswa kwamathala eencwadi anjenge-daisyUI, ngoku unokonwabela ezona hlabathi zimbini.

Imo Emnyama

Enye yezinto zamva nje ze-Tailwind CSS kunye ne-daisyUI yimowudi emnyama, ekuvumela ukuba wenze iiwebhusayithi ezinemixholo emnyama ngaphandle komzamo.

Umzekelo weFlexbox

I-Tailwind CSS idibanisa kakuhle kunye neempawu zeCSS zangoku njengeFlexbox. Umzekelo, ungenza ubeko oluphendulayo usebenzisa iiklasi ezifana ne-flex, justify- center, items-center, njalo njalo.

Ngokudityaniswa kweXesha nje, unokuzama amaxabiso odidi oluluncedo ahlukeneyo ngokulula. Ukuba enye iklasi yoncedo ayisebenzanga, yitshintshe ngokulula ukwenza into yakho.

Umzekelo woYilo lweFlexbox

Ukusebenzisa i-Tailwind CSS, kulula ukwenza iiplani ezintsonkothileyo njengebha yokukhangela ephendulayo. Nanku umzekelo:

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

Amacandelo eselenziwe

Ukuba uthathe isigqibo sokusebenzisa ikhowudi ye-css ye-tailwind kwiprojekthi yakho, uya kuba nakho ukufumana izinto ezininzi ezenziwe kwangaphambili kwi-intanethi. Ungakopa nayiphi na kwezi kwaye wenze ngokwezifiso iwebhusayithi yakho.

Uyiguqula njani iCSS ibe yiTailwind CSS

Ukukwazi ukuguqula iCSS ibe ziiklasi zeTailwind CSS yinto efunwa ngabaphuhlisi abaninzi. Zininzi iiwebhusayithi kwi-intanethi ezakhiwe ngaphambi kokuba iTailwind CSS ibekho. La maphepha ewebhu asebenzisa i-css enecwecwe lesimbo kunye neengcali zophuhliso lwewebhu zifuna ukufuduka la maphepha aye kwi-Tailwind CSS.

I-DivMagic sisixhobo sophuhliso lwewebhu esakhelwe umphuhlisi wewebhu kunye nabaphuhlisi besoftware. Ivumela nasiphi na isitayile ukuba sikotshwe ukusuka kwi-vanilla css ukuya kwi-Tailwind CSS. Ngokucofa kanye, unokuguqula naliphi na icandelo kwi-intanethi libe yi-Tailwind CSS kwaye usebenzise i-Tailwind kwiprojekthi yakho kwaye wenze isitayile ngendlela oyifunayo ngayo.

Ngena nzulu kwiPhilosofi yeTailwind CSS

Ifilosofi emva kweTailwind CSS kukugxila kwizinto eziluncedo. Oku kuthetha endaweni yokuchaza kwangaphambili iiklasi zecandelo, i-Tailwind CSS ibonelela ngeeklasi eziluncedo ezikwinqanaba elisezantsi ezenza ukuba wenze uyilo olulodwa ngaphandle kokushiya iHTML yakho.

Kutheni Ushenxa kwi-CSS yesiNtu?

I-CSS yesiNtu inokubangela ukusetyenziswa ngokugqithisileyo kokugqithiswayo, iifayile ezidumbileyo, kunye 'nesuphu ye-div'. Ngokutshintshela kwisakhelo se-CSS esiluncedo njenge-Tailwind CSS, unokunciphisa le miba, ibangele isicoci, ikhowudi yekhowudi elungelelanisiweyo.

Amava aMandla eeklasi eziluncedo

Iiklasi eziluncedo zikunceda ukuba unqande ukuphinda izitayile ezifanayo kuwo onke amaphepha akho esitayile. Ngumgaqo othi "Musa ukuphinda-phinda" (DRY). Ezi klasi zikugcina ixesha elibalulekileyo kunye nomzamo kwaye zikhokelela kwi-codebase egcinekayo.

Ukuphonononga Tailwind CSS Directives

I-Tailwind CSS yazisa izikhokelo ezimbalwa ezinokuthi zisetyenziswe ngaphakathi kwamaphepha akho esitayile. Ezi ziquka @apply, @variants, kwaye @screen. Ukuqonda kunye nokusebenzisa le miyalelo kunokuphucula kakhulu amava akho e-Tailwind CSS. Ezi zinokufakwa kwifayile ye-CSS ye-Tailwind. Ungabhala iiklasi ze-css usebenzisa le ndlela.

Yandisa Tailwind CSS nge Plugins

I-Tailwind CSS inokwandiswa ngeeplagi, ukongeza ukusebenza okutsha okanye ukwenza ngokwezifiso ekhoyo. Funda ukuba ungazisebenzisa njani iiplagi ukuze ukwandise ukusebenza kakuhle kunye nobuhle beeprojekthi zakho zewebhu.

Faka i-Tailwind CSS kwi-Workflow yakho

Ukudibanisa i-Tailwind CSS kuhambo lwakho lophuhliso luthe ngqo, nokuba usebenzisa izixhobo zokwakha ezifana neWebpack okanye iParcel, okanye usebenza ngezakhelo ezifana ne-Next.js okanye iGatsby.

Ukuphucula ukuFikelela ngeTailwind CSS

I-Tailwind CSS ikhuthaza ukuyila okufikelelekayo ngokubandakanya uluhlu lweempawu ze-ARIA kwiiklasi zayo. Yenza unxibelelwano olufikelelekayo kwaye uphucule amava omsebenzisi kuye wonke umntu.

Bopha amandla eFlexbox kunye neGridi ngeTailwind CSS

Sebenzisa imodyuli yoyilo lwangoku lweCSS njengeFlexbox kunye neGridi eneTailwind CSS. Funda ukuba iiklasi eziluncedo zingasetyenziswa njani ukulawula uyilo ngendlela eguquguqukayo nephendulayo.

Ungazilungisa njani iiProjekthi zakho ze-Tailwind CSS

I-Tailwind CSS ibonelela ngezixhobo ezininzi zokulungisa iimpazamo kunye neendlela ezenza ukuba kube lula ukuchonga nokusombulula imiba yesimbo. Qonda ezi zixhobo kwaye uphucule izakhono zakho zokulungisa iimpazamo.

Yenza iWebhu eMbala ngeTailwind CSS

I-Tailwind CSS iza nephalethi ebanzi yemibala enokwenziwa ngokwezifiso. Funda indlela yokusebenzisa kunye nokwenza ngokwezifiso le mibala ukwenza uyilo oludlamkileyo nolubonakalayo.

Phuhlisa ngokukhawuleza ngeTailwind CSS 'JIT Mode

Ngena nzulu kwimowudi ye-Tailwind CSS's Just-In-Time. Qonda indlela esebenza ngayo kunye nendlela enokukhawulezisa ngayo uphuhliso lwakho kunye namaxesha okwakha.

Ukusuka kuZero ukuya kwiQhawe: Master Tailwind CSS

Qalisa kuhambo oluya kwi-Tailwind CSS. Ukusuka ekusekweni okusingqongileyo ukuya ekuphononongeni izihloko eziphambili, esi sikhokelo sibanzi sikugqubuthele.

Yenza ngokwezifiso i-Tailwind CSS kwiimfuno zakho

Enye yezona zinto zinamandla zeTailwind CSS kukuguquguquka kwayo. Funda ukwenza ngokwezifiso iTailwind ukuze ihambelane neemfuno zeprojekthi yakho.

Ukufumana izandla kunye neTailwind CSS

Zibandakanye ekufundeni ngokufunda ngothotho lwemizekelo ebonakalayo. Phonononga indlela yokwakha iinxalenye zewebhu ezahlukeneyo usebenzisa iTailwind CSS kunye neDaisyUI.

Ukufuduka kwenye i-CSS Frameworks ukuya kwiTailwind CSS

Ucinga ngokutshintshela kwiTailwind CSS? Qonda umahluko ophambili phakathi kweTailwind kunye nezinye izikhokelo, kwaye ufunde amaqhinga asebenzayo okuhambisa iiprojekthi zakho.

Ungasebenzisa iDivMagic okanye izixhobo ezifanayo ukonyusa kakhulu isantya sokufuduka kwakho.

Izixhobo zophuhliso lwewebhu ezifana ne-DivMagic zikuvumela ukuba ukope nayiphi na into yoyilo kunye naluphi na uhlobo oluvela kuyo nayiphi na iwebhusayithi ngonqakrazo olunye.

Umzekelo olula: Ukwakha iCandelo leKhadi eliphendulayo

Nanku umzekelo wendlela onokwakha ngayo icandelo lekhadi eliphendulayo usebenzisa iTailwind CSS. Eli candelo liza kuba nomfanekiso, isihloko, kunye nenkcazo.

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

Ukwakha iFomu ngeTailwind CSS

Ukwenza ifom nge-Tailwind CSS iqondile kwaye inembile. Nantsi ifom yoqhagamshelwano elula:

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

Ukulungiselela iTailwind CSS

I-Tailwind CSS ikuvumela ukuba ulungelelanise ulungelelwaniso lwayo olungagqibekanga, ulungelelanisa iiklasi eziluncedo kwiimfuno zakho. Ngezantsi kukho i-eyi umzekelo wendlela yokwenza ipalethi yombala ngokwezifiso.

Le mizekelo ibonisa ukuguquguquka kunye nokulula kwe-Tailwind CSS, ebonisa indlela abanokukunceda ngayo ukudala izixhobo zewebhu zangoku, eziphendulayo ngokufanelekileyo nangempumelelo.

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

Ngaba ndiza kufuna nayiphi na ifayile yeCSS?

Ifayile kuphela oyifunayo nge Tailwind CSS yi tailwind.config.js ifayile.

Loo fayile iya kubamba useto lwakho loqwalaselo. Awuyi kubhala i-css okanye ube nayo nayiphi na enye ifayile ye-css. Le fayile yoqwalaselo yiyo kuphela oya kuyidinga.

Zeziphi ezona zenzo zilungileyo zeTailwind CSS?

Ukufumana inkcazo eneenkcukacha malunga nezona ndlela zibalaseleyo ze-Tailwind CSS, nceda ubone elinye inqaku lethu le-Tailwind CSS yeZenzo ezilungileyo.

I-Tailwind CSS: Ikamva loYilo lweWebhu

Cinga ngendlela iTailwind CSS ebumba ngayo ikamva loyilo lwewebhu. Funda malunga neempembelelo zayo kunye nokubanakho ukukhula kushishino lophuhliso lwewebhu.