I-Tailwind CSS - Yakha amawebhusayithi esimanje ngokushesha ngaphandle kokushiya i-HTML yakho

Dala Imiklamo Eyinkimbinkimbi Kalula

Nge-Tailwind CSS, ukudala imiklamo eyinkimbinkimbi kuba mnandi. Inhlanganisela yamakilasi awusizo kanye nezinsiza zokuklama eziphendulayo ikuvumela ukuthi udizayine izakhiwo eziyinkimbinkimbi kalula, ngaphandle kokuyekethisa ekusebenzeni nasekugcinweni kwewebhusayithi yakho.

Yakha noma yini

Ubuhle be-Tailwind CSS busezintweni ezihlukahlukene. Ungakha noma yini kusuka ekhasini lebhulogi elilula ukuya kunkundla ye-e-commerce ethuthukisiwe, sonke ngenkathi usebenzisa amakilasi ensizakalo afanayo.

Unqunyelwe kuphela umcabango wakho. Umehluko omkhulu ekusebenziseni i-Vanilla CSS ijubane ongakha ngalo imiklamo yangokwezifiso.

Indlela evamile yokusebenzisa amakilasi e-css angokwezifiso anezingxenye ze-html njenge-div, isigaba se-div, isigaba se-p ihlale iyinketho kodwa ukuthuthukiswa kwesivinini okuza ne-Tailwind CSS kwenza impilo yakho ibe lula.

Imikhuba emihle ayisebenzi

Ngokwesiko, i-CSS ibhalwa ngokusungula iqoqo lezitayela zomhlaba wonke nokuzicwengisisa ngokwengxenye-ngengxenye. Nakuba lena kuyindlela edumile, ingaholela kukhodi enkulu, okunzima ukuyigcina.

I-Tailwind CSS inselele lo mbono, iphikisana ngokuthi i-CSS yensiza-yokuqala inikeza isixazululo esihlanzekile, esigcinekayo.

Umtapo wezincwadi odume kakhulu we-Tailwind CSS

I-daisyUI ingumtapo wezincwadi odume kakhulu we-Tailwind CSS, iziqhayisa ngezinto eziklanywe kusengaphambili ezingaphezu kuka-50, amakilasi angu-500+ wezinsiza, kanye namathuba angapheli. Ikusindisa ekusunguleni kabusha isondo njalo uma udala iphrojekthi entsha.

Ungaphinde Usungule Isondo Njalo

Esikhundleni sokuchitha isikhathi sakho ngenqubo eyisicefe yokubhala inqwaba yamagama ekilasi kuphrojekthi ngayinye entsha, i-Tailwind CSS ikuvumela ukuthi usebenzise isethi echazwe kahle, ye-semantic yamakilasi awusizo.

Lawa makilasi angasetshenziswa kabusha futhi asebenza ngokuzwana ne-cascade ye-CSS, akunikeza isisekelo esiqinile sawo wonke amaphrojekthi akho.

I-Tailwind CSS - I-Utility First CSS Framework

Emgogodleni wayo, i-Tailwind CSS iwuhlaka olusetshenziswayo lokuqala lwe-CSS. Lokhu kusho ukuthi inikeza amakilasi ensiza asezingeni eliphansi, ahlanganisekayo ongawasebenzisa ukwakha noma yimuphi umklamo, ngokuqondile ku-HTML yakho. Awasekho amafayela e-CSS angapheli, ikhodi elula nenembile kuphela.

Sebenzisa Amagama Ekilasi Lesemantic

Amagama amakilasi e-Semantic athuthukisa ukufundeka kwekhodi yakho, okwenza kube lula ukuqonda ukuthi ikilasi elithile lenzani ngokubheka nje igama lalo. Lesi esinye sezici eziningi i-Tailwind CSS ezamukele ukuze kuthuthukiswe umuzwa wonjiniyela.

I-CSS ehlanzekile. I-Framework Agnostic. Isebenza Yonke indawo

I-Tailwind CSS ayikubopheleli kunoma yiluphi uhlaka oluthile. Imane iyi-CSS emsulwa, ngakho-ke ungayisebenzisa nanoma yiluphi uhlaka, noma ungenalo nhlobo uhlaka. Isebenza yonke indawo lapho i-CSS isebenza khona.

Izinzuzo ze-Tailwind CSS

Izinzuzo zokusebenzisa i-Tailwind CSS zifaka phakathi ukukhiqiza okukhulisiwe, usayizi wefayela we-CSS oncishisiwe, nolwazi lukanjiniyela oluthuthukisiwe ngenxa yendlela yokusebenza yokuqala. Ukwengeza, imodi ye-Just-In-Time (JIT) inikeza izikhathi zokwakha ezisheshayo, futhi isheshisa inqubo yakho yokuthuthukisa.

Intengo ye-Tailwind CSS

I-Tailwind CSS iphrojekthi yomthombo ovulekile, okusho ukuthi imahhala ngokuphelele ukuyisebenzisa. Izindleko ziza uma ufuna ukufinyelela izici ze-premium njengezingxenye ze-UI nezifanekiso, ezinikezwa nge-Tailwind UI.

Inombono futhi iyavumelana nezimo ngesikhathi esifanayo

I-Tailwind CSS inikeza umbono oqinile wokuthi ungayakha kanjani i-CSS yakho, nokho iguquguquka ngokwanele ukuvumela ukwenza ngokwezifiso. Le bhalansi ikuvumela ukuthi ugxile kulokho okubaluleke kakhulu - ukwakha ama-UI amahle.

Izici zesimanje

I-Tailwind CSS ihlanganisa izici zesimanje ezifana ne-Flexbox, Igridi, nezakhiwo zangokwezifiso, okuyenza ibe ukukhetha okuhle kakhulu ekuthuthukiseni izinhlelo zokusebenza zewebhu zesimanje.

Izimfuneko Zokusebenzisa i-Tailwind CSS

Ngaphambi kokuthi uqale ukusebenzisa i-Tailwind CSS, udinga ukuqonda okuyisisekelo kwe-HTML ne-CSS.

Isetshenziswa nini i-Tailwind CSS

I-Tailwind CSS ifanele zonke izinhlobo zamaphrojekthi ewebhu, amakhulu noma amancane. Uma ukhathele ukulwa ne-CSS futhi ufuna isixazululo esisebenza kahle, esilungele unjiniyela, kusho ukuthi i-Tailwind CSS ingeyakho.

Awungeni kuzinhlaka zengxenye?

Uma ungeyena umlandeli wezinhlaka zengxenye efana ne-React noma i-Vue, akukho ukukhathazeka. I-Tailwind CSS iyi-framework-agnostic futhi ingasetshenziswa nge-HTML ehlanzekile ne-JavaScript.

Ukufana Nomehluko Phakathi Kwe-Tailwind CSS kanye Nezinye Izinhlaka Ze-CSS

Ngenkathi ezinye izinhlaka ezifana ne-Bootstrap ne-Foundation zinikeza izingxenye eziklanywe ngaphambili, i-Tailwind CSS ikunikeza amathuluzi okwakha imiklamo yangokwezifiso ngokuphelele ngaphandle kokushiya i-HTML yakho. Kodwa-ke, ngokuhlanganiswa kwengxenye yemitapo yolwazi efana ne-daisyUI, manje ungajabulela okungcono kakhulu kuyo yomibili imihlaba.

Imodi Emnyama

Esinye sezici zakamuva ze-Tailwind CSS ne-daisyUI imodi emnyama, ekuvumela ukuthi udale amawebhusayithi anetimu emnyama kalula.

Isibonelo se-Flexbox

I-Tailwind CSS ihlanganisa kahle nezici zesimanje ze-CSS ezifana ne-Flexbox. Isibonelo, ungakha isakhiwo esiphendulayo usebenzisa amakilasi afana ne-flex, justify- center, items-center, njalo njalo.

Ngenhlanganisela ye-Just-in-Time, ungazama amanani ahlukene wesigaba sosizo kalula. Uma isigaba sosizo esisodwa singasebenzi, vele usishintshe ukuze wenze ngendlela oyifisayo isici sakho.

Isibonelo Sesakhiwo Se-Flexbox

Usebenzisa i-Tailwind CSS, kulula ukudala izakhiwo eziyinkimbinkimbi njengebha yokuzulazula ephendulayo. Nasi isibonelo:

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

Izingxenye esezilungile

Uma unqume ukusebenzisa ikhodi ye-tailwind css kuphrojekthi yakho, uzokwazi ukuthola izinto eziningi ezenziwe ngaphambilini ku-inthanethi. Ungakopisha noma yikuphi kwalokhu futhi wenze ngezifiso iwebhusayithi yakho.

Ungayiguqula kanjani i-CSS ibe yi-Tailwind CSS

Ukwazi ukuguqula i-CSS ibe amakilasi e-Tailwind CSS yinto edingwa onjiniyela abaningi. Kunamawebhusayithi amaningi ku-inthanethi akhiwe ngaphambi kokuba i-Tailwind CSS ibe khona. Lawa makhasi ewebhu asebenzisa i-css eneshidi lesitayela nezingcweti zokuthuthukisa iwebhu zifuna ukuthuthela lawa makhasi aye ku-Tailwind CSS.

I-DivMagic iyithuluzi lokuthuthukisa iwebhu elakhelwe unjiniyela wewebhu nabathuthukisi besoftware. Ivumela noma yisiphi isitayela ukuthi sikopishwe kusuka ku-vanilla css kuya ku-Tailwind CSS. Ngokuchofoza okukodwa, ungaguqula noma iyiphi ingxenye ku-inthanethi ibe yi-Tailwind CSS futhi usebenzise i-Tailwind kuphrojekthi yakho futhi wenze isitayela ngendlela oyifisayo nganoma iyiphi indlela oyifunayo.

Ngena Ujule ku-Tailwind CSS Philosophy

Ifilosofi ngemuva kwe-Tailwind CSS iwukugxila ekusetshenzisweni. Lokhu kusho ukuthi esikhundleni sokuchaza amakilasi ezingxenye, i-Tailwind CSS inikeza amakilasi ensiza asezingeni eliphansi akuvumela ukuthi wakhe imiklamo ehlukile ngaphandle kokushiya i-HTML yakho.

Kungani Usuka Ku-CSS Yendabuko?

I-CSS yosiko ingase ibangele ukusetshenziswa ngokweqile kokukhishwa, amafayela aqumbile, kanye 'nesobho le-div'. Ngokushintshela kuhlaka lokuqala lwe-CSS olusetshenziswayo olufana ne-Tailwind CSS, ungadambisa lezi zinkinga, okuholela ekuhlanzekeni, kwekhodikhodi ehleleke kakhudlwana.

Izwa Amandla Okusebenzisa Amakilasi

Amakilasi ezinsiza akusiza ukuthi ugweme ukuphinda izitayela ezifanayo kuwo wonke amashidi akho esitayela. Kuwumgomo othi "Ungaziphindi" (DRY). Lawa makilasi akongela isikhathi esibalulekile nomzamo futhi aholela ku-codebase egcinekeka kakhulu.

Ukuhlola Iziqondiso ze-Tailwind CSS

I-Tailwind CSS yethula iziqondiso ezimbalwa ezingasetshenziswa ngaphakathi kwamakhasi akho esitayela. Lokhu kubandakanya @apply , @variants , kanye ne-@screen. Ukuqonda nokusebenzisa lezi ziqondiso kungathuthukisa kakhulu umuzwa wakho we-Tailwind CSS. Lezi zingafakwa kufayela le-Tailwind Config CSS. Ungabhala amakilasi e-css usebenzisa le ndlela.

Nweba i-Tailwind CSS ngama-plugin

I-Tailwind CSS inganwetshwa ngama-plugin, kwengeze ukusebenza okusha noma ukwenza ngokwezifiso ekhona. Funda ukuthi ungawasebenzisa kanjani ama-plugin ukuze ukwandise ukusebenza kahle nobuhle bephrojekthi yakho yewebhu.

Faka i-Tailwind CSS ku-Workflow Yakho

Ukuhlanganisa i-Tailwind CSS ekuhambeni komsebenzi wakho wokuthuthukisa kuqondile, kungakhathaliseki ukuthi usebenzisa amathuluzi okwakha afana ne-Webpack noma i-Parcel, noma usebenza ngezinhlaka ezifana ne-Next.js noma i-Gatsby.

Thuthukisa Ukufinyeleleka nge-Tailwind CSS

I-Tailwind CSS ikhuthaza ukuklama okufinyelelekayo ngokufaka uhla lwezibaluli ze-ARIA emakilasini ayo. Dala ukuxhumana okufinyeleleka kakhudlwana futhi uthuthukise umuzwa womsebenzisi wawo wonke umuntu.

Bopha Amandla e-Flexbox kanye neGridi nge-Tailwind CSS

Sebenzisa amamojula esimanje esakhiwo se-CSS njenge-Flexbox neGridi ene-Tailwind CSS. Funda ukuthi amakilasi ezinsiza angasetshenziswa kanjani ukulawula isakhiwo ngendlela eguquguqukayo nephendulayo.

Ungawasusa Kanjani Amaphrojekthi Wakho we-Tailwind CSS

I-Tailwind CSS inikeza amathuluzi amaningana okulungisa amaphutha namasu enza ukukhomba nokuxazulula izinkinga zesitayela kube lula. Qonda lawa mathuluzi futhi uthuthukise amakhono akho okulungisa iphutha.

Dala Iwebhu Enemibala Nge-Tailwind CSS

I-Tailwind CSS iza nephalethi ebanzi yemibala ongayenza ngendlela oyifisayo. Funda indlela yokusebenzisa nokwenza ngendlela oyifisayo le mibala ukuze udale imiklamo enempilo nebukekayo.

Thuthukisa Ngokushesha nge-Tailwind CSS' JIT Mode

Ngena ujule kumodi ye-Tailwind CSS's Just-In-Time. Qonda ukuthi isebenza kanjani nokuthi ingasheshisa kanjani ukukhula kwakho kanye nezikhathi zokwakha.

Ukusuka ku-Zero kuya ku-Hero: Master Tailwind CSS

Thatha uhambo oluya ekufundiseni i-Tailwind CSS. Kusukela ekusetheni indawo yakho kuye ekuhloleni izihloko ezithuthukile, lo mhlahlandlela obanzi ukuphathe.

Yenza ngokwezifiso i-Tailwind CSS kuzidingo zakho

Enye yamandla amakhulu e-Tailwind CSS ukuguquguquka kwayo. Funda ukwenza ngendlela oyifisayo i-Tailwind ukuze ihambisane nezidingo ezithile zephrojekthi yakho.

Ukuhlangana ne-Tailwind CSS

Zibandakanye ekufundeni ngezandla ngokusebenzisa uchungechunge lwezibonelo ezingokoqobo. Hlola ukuthi ungazakha kanjani izingxenye zewebhu ezahlukahlukene usebenzisa i-Tailwind CSS ne-DaisyUI.

Ifuduka isuka kwezinye i-CSS Frameworks iye ku-Tailwind CSS

Ucabanga ukushintshela ku-Tailwind CSS? Qonda umehluko oyinhloko phakathi kwe-Tailwind nezinye izinhlaka, futhi ufunde amasu asebenzayo okuthutha amaphrojekthi akho.

Ungasebenzisa i-DivMagic noma amathuluzi afanayo ukuze ukhuphule kakhulu isivinini sakho sokufuduka.

Amathuluzi okuthuthukisa iwebhu njenge-DivMagic akuvumela ukuthi ukopishe noma iyiphi into noma iyiphi idizayini nanoma yisiphi isitayela kunoma iyiphi iwebhusayithi ngokuchofoza okukodwa.

Isibonelo Esilula: Ukwakha Ingxenye Yekhadi Eliphendulayo

Nasi isibonelo sokuthi ungakha kanjani ingxenye yekhadi eliphendulayo usebenzisa i-Tailwind CSS. Le ngxenye izoqukatha isithombe, isihloko, nencazelo.

<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 nge-Tailwind CSS

Ukudala ifomu nge-Tailwind CSS kuqondile futhi kunembile. Nali ifomu lokuxhumana elilula:

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

Ukwenza ngokwezifiso i-Tailwind CSS

I-Tailwind CSS ikuvumela ukuthi wenze ngendlela oyifisayo ukucushwa kwayo okuzenzakalelayo, uhambisane nezidingo zakho. Ngezansi kukhona i-eis isibonelo sendlela yokwenza ngokwezifiso iphalethi yombala.

Lezi zibonelo zibonisa ukuguquguquka nobulula be-Tailwind CSS, ekhombisa ukuthi zingakusiza kanjani ukuthi udale izingxenye zewebhu zesimanje, eziphendulayo ngempumelelo nangempumelelo.

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

Ingabe ngizodinga noma yiliphi ifayela le-CSS?

Okuwukuphela kwefayela olidingayo nge-Tailwind CSS ifayela le-tailwind.config.js.

Lelo fayela lizobamba izilungiselelo zakho zokucushwa. Ngeke ubhale i-css noma ube nelinye ifayela le-css. Leli fayela lokucushwa yilona kuphela ozolidinga.

Yiziphi izinqubo ezihamba phambili ze-Tailwind CSS?

Ukuze uthole incazelo enemininingwane mayelana nemikhuba ehamba phambili ye-Tailwind CSS, sicela ubheke enye indatshana yethu I-Tailwind CSS Best Practices.

I-Tailwind CSS: Ikusasa Lomklamo Wewebhu

Cabangela indlela i-Tailwind CSS elilolonga ngayo ikusasa lomklamo wewebhu. Funda mayelana nomthelela wayo kanye namandla okukhula embonini yokuthuthukisa iwebhu.