Tailwind CSS - Si dhakhso leh u dhis shabakadaha casriga ah adoon ka tagin HTML-kaaga

U Samee Naqshado Adag oo Fudud

Iyada oo la adeegsanayo Tailwind CSS, abuurista naqshado adag waxay noqotaa neecaw. Isku darka fasalada utility iyo utility design ka jawaabaan waxay kuu ogolaaneysaa inaad naqshadeyso naqshado qallafsan si sahlan, adigoon wax u dhimeynin waxqabadka iyo ilaalinta boggaaga.

Wax walba dhis

Quruxda Tailwind CSS waxay ku jirtaa is-bedelkeeda. Waxaad ka abuuri kartaa wax kasta oo ka socda bog blog fudud ilaa meel sare oo e-ganacsiyeedka, dhammaan intaad isticmaalayso isla fasalada utility dareen leh.

Male-awaalkaaga kaliya ayaa ku xaddidan. Farqiga ugu weyn ee isticmaalka Vanilla CSS waa xawaaraha aad ku dhisi karto naqshado gaar ah.

Habka soo jireenka ah ee isticmaalka fasallada css-ga caadiga ah ee leh qaybaha html sida div, class div, p class had iyo jeer waa ikhtiyaar laakiin horumarinta xawaaraha ee la socota Tailwind CSS ayaa noloshaada fududaynaysa.

Dhaqamada ugu wanagsan run ahaantii ma shaqeeyaan

Dhaqan ahaan, CSS waxa loo qoraa iyada oo la samaynayo hab-raacyo caalami ah oo lagu sifeeyo qaab-qayb-qayb. Iyadoo tani tahay hab caan ah, waxay u horseedi kartaa kood weyn, oo adag in la ilaaliyo.

Tailwind CSS waxay caqabad ku noqotaa fikraddan, iyada oo ku doodaysa in utility-hor CSS ay bixiso xal nadiif ah oo la ilaalin karo.

Maktabada qaybta ugu caansan ee Tailwind CSS

daisyUI waa maktabadda qaybta ugu caansan ee Tailwind CSS, oo ku faanaysa in ka badan 50 qaybood oo horay loo qorsheeyay, 500+ fasalo tasiilaad ah, iyo suurtogalnimo aan dhammaad lahayn. Waxay kaa badbaadinaysaa dib-u-abuurista giraanta mar kasta oo aad abuurto mashruuc cusub.

Dib ha u curin giraanta mar kasta

Halkii aad wakhtigaaga ku lumin lahayd habka caajiska ah ee qorista daraasiin magacyo fasal kasta ah mashruuc kasta oo cusub, Tailwind CSS waxa ay awood kuu siinaysaa inaad isticmaasho fasal si fiican loo qeexay, semantic oo ah fasalo utility.

Fasaladani waa kuwo dib loo isticmaali karo waxayna si wada jir ah ula shaqeeyaan CSS cascade, iyagoo ku siinaya aasaas adag dhammaan mashaariicdaada.

Tailwind CSS - Qaab-dhismeedka CSS ugu horreeya utility

Xuddunta, Tailwind CSS waa utility-ugu horreeya qaabdhismeedka CSS. Tani waxay ka dhigan tahay inay bixiso heer hoose, fasalo utility la isku dari karo oo aad isticmaali karto si aad u dhisto naqshad kasta, si toos ah HTML kaaga. Ma jiro faylal CSS aan dhammaad lahayn, kaliya kood fudud oo dareen leh.

Isticmaal Magacyada Fasalka Semantic

Magacyada fasalka semantic waxay hagaajiyaan akhrinta koodkaaga, taas oo sahlaysa in la fahmo waxa fasal gaar ahi sameeyo iyada oo la eegayo magaciisa. Tani waa mid ka mid ah sifooyinka badan ee Tailwind CSS ay qaadatay si ay u horumariso khibrada horumariyaha.

CSS saafi ah. Qaab-dhismeedka Agnostic. Meel walba ka shaqeeya

Tailwind CSS kuma xidho qaab-dhismeed gaar ah. Si fudud waa CSS saafi ah, markaa waxaad u isticmaali kartaa qaab kasta, ama xitaa iyada oo aan lahayn qaab-dhismeed kasta. Waxay ka shaqeysaa meel kasta oo CSS ka shaqeyso.

Faa'iidooyinka Tailwind CSS

Faa'iidooyinka isticmaalka Tailwind CSS waxaa ka mid ah wax soo saarka oo kordhay, cabbirka faylka CSS oo la dhimay, iyo khibrad horumariye oo la xoojiyey iyada oo ay ugu wacan tahay habka ugu horreeya ee tamarta. Intaa waxaa dheer, qaabka Just-In-Time (JIT) wuxuu bixiyaa waqtiyo dhismo-dhakhso leh, taasoo sii dedejinaysa habkaaga horumarineed.

Qiimaha Tailwind CSS

Tailwind CSS waa mashruuc il furan, taas oo macnaheedu yahay gabi ahaanba waa bilaash in la isticmaalo. Kharashku waxa uu yimaadaa marka aad rabto in aad gasho sifooyin qaali ah sida qaybaha UI iyo qaab-dhismeedka, kuwaas oo lagu bixiyo Tailwind UI.

Waa fikir iyo dabacsanaan isku mar

Tailwind CSS waxay ku siinaysaa fikrad adag sida loo qaabeeyo CSS kaaga, haddana waa dabacsanaan ku filan si loo oggolaado habaynta. Isku-dheelitirkani wuxuu awood kuu siinayaa inaad diirada saarto waxa ugu muhiimsan - dhisida UI qurux badan.

Tilmaamaha casriga ah

Tailwind CSS waxay qabataa sifooyinka casriga ah sida Flexbox, Grid, iyo guryaha gaarka ah, taas oo ka dhigaysa doorasho aad u fiican horumarinta codsiyada shabakada casriga ah.

Shuruudaha Isticmaalka Tailwind CSS

Kahor intaadan bilaabin isticmaalka Tailwind CSS, waxaad u baahan tahay faham aasaasi ah oo HTML iyo CSS ah.

Goorta la isticmaalayo Tailwind CSS

Tailwind CSS waxay ku habboon tahay dhammaan noocyada mashaariicda shabakadda, mid weyn ama mid yar. Haddii aad ka daashay la legdanka CSS oo aad raadinayso wax ku ool badan, xal horumariye-saaxiibtinimo ah, markaa Tailwind CSS ayaa adiga kuu ah.

Ma galay qaab-dhismeedka qaybaha?

Haddii aadan taageere u ahayn qaab-dhismeedka qaybaha sida React ama Vue, walwal ma leh. Tailwind CSS waa qaab-dhismeed-agnostic waxaana loo isticmaali karaa HTML saafi ah iyo JavaScript.

Waxyaalaha ay iskaga mid yihiin iyo faraqa u dhexeeya Tailwind CSS iyo Qaab-dhismeedka kale ee CSS

Iyadoo qaab-dhismeedka kale sida Bootstrap iyo Foundation ay bixiyaan qaybo horay loo qorsheeyay, Tailwind CSS waxay ku siinaysaa qalabka aad ku dhisto nashqadaha caadiga ah adigoon ka tagin HTML-kaaga. Si kastaba ha ahaatee, isku dhafka maktabadaha ka kooban sida daisyUI, waxaad hadda ku raaxaysan kartaa waxa ugu wanaagsan labada adduun.

Qaab Madow

Mid ka mid ah sifooyinka ugu dambeeyay ee Tailwind CSS iyo daisyUI waa qaabka mugdiga ah, kaas oo awood kuu siinaya inaad abuurto mareegaha mawduucyada mugdiga ah si adag.

Tusaalaha Flexbox

Tailwind CSS waxay si fiican ula midowdaa sifooyinka CSS ee casriga ah sida Flexbox. Tusaale ahaan, waxaad samayn kartaa habayn jawaab celin leh adigoo isticmaalaya fasalo ay ka mid yihiin flex, justify-centre, sheyga-centre, iyo wixii la mid ah.

Marka la isku daro Just-in-Time, waxaad si fudud u tijaabin kartaa qiimayaal kala duwan oo utility ah. Haddii hal fasal utility shaqayn waayo, si fudud u beddel si aad u habayso shaygaaga.

Tusaale Layout Flexbox

Isticmaalka Tailwind CSS, way sahlan tahay in la abuuro naqshado kakan sida bar navigation ka jawaabaya. Waa kan tusaale:

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

Qaybaha diyaarsan

Haddii aad go'aansatid inaad ku isticmaasho koodhka css ee mashruucaaga, waxaad awoodi doontaa inaad ka hesho qaybo badan oo horay loo sameeyay online. Waad koobi kartaa mid ka mid ah kuwan oo aad u habeyn kartaa boggaaga internetka.

Sida CSS loogu badalo Tailwind CSS

Awood u yeelashada in CSS loo beddelo fasallada Tailwind CSS waa wax horumariyayaashu u baahan yihiin. Waxaa jira shabakado badan oo internetka ah oo la dhisay ka hor intaysan jirin Tailwind CSS. Bogaggaan shabakadu waxay isticmaalaan css oo wata xaashida qaabka iyo xirfadlayaasha horumarinta webka waxay rabaan inay u guuraan boggagan Tailwind CSS.

DivMagic waa aalad horumarineed oo shabakad loo dhisay horumariyayaasha webka iyo soosaarayaasha software. Waxay u ogolaataa qaab kasta in laga soo guuriyo vanilj css ilaa Tailwind CSS. Hal gujin, waxaad u bedeli kartaa qayb kasta oo ka mid ah internetka Tailwind CSS oo waxaad isticmaali kartaa Tailwind mashruucaaga oo aad habayn kartaa qaabka aad rabto.

Si qoto dheer ugu dhufo falsafada Tailwind CSS

Falsafada ka dambeysa Tailwind CSS waa in diirada la saaro utility. Tani waxay ka dhigan tahay halkii aad horay u sii qeexi lahayd fasalada qaybta, Tailwind CSS waxay ku siinaysaa fasalo adeeg oo hooseeya kuwaas oo awood kuu siinaya inaad dhisto naqshado gaar ah adigoon ka tagin HTML-kaaga.

Waa maxay sababta looga guuro CSS-dhaqameedka?

CSS-dhaqameedka ayaa laga yaabaa inuu keeno isticmaalka xad dhaafka ah ee xad-dhaafka ah, faylalka bararsan, iyo ' maraq div'. Adiga oo u wareegaya qaab-dhismeedka utility-ka koowaad ee CSS sida Tailwind CSS, waxaad yarayn kartaa arrimahan, taasoo keentay nadiifiye, kood-habboon oo toosan.

La kulma Awooda Fasalada Utility

Fasallada utility waxay kaa caawinayaan inaad iska ilaaliso inaad ku celceliso qaabab isku mid ah inta lagu jiro xaashida qaabkaaga. Waa mabda'a ah "Ha ku celin Naftaada" (QALAL). Fasaladani waxay ku badbaadiyaan waqti iyo dadaal badan waxayna kuu horseedaan codebase aad loo ilaaliyo.

Sahaminta Dardaaranka Tailwind CSS

Tailwind CSS waxa ay soo bandhigtaa dhawr dardaaran ah oo loo isticmaali karo xaashida qaabkaaga. Kuwaas waxaa ka mid ah @apply, @variants, iyo @screen. Fahamka iyo ka faa'iidaysiga awaamiirtan waxay si weyn u wanaajin kartaa waayo-aragnimadaada Tailwind CSS. Kuwaas waxaa lagu meelayn karaa faylka Tailwind Config CSS. Waxaad qori kartaa xiisadaha css adigoo isticmaalaya habkan.

Ku Kordhi Tailwind CSS oo wata Plugins

Tailwind CSS waxaa lagu kordhin karaa plugins, iyadoo lagu darayo hawlqabad cusub ama habaynta midda jirta. Baro sida aad uga faa'iidaysato plugins si aad sare ugu qaaddo waxtarka iyo quruxda mashaariicda shabakadaada.

Ku darida Dabaylaha CSS ee Socodkaaga Shaqo

Isku dhafka Tailwind CSS ee socodkaaga shaqo waa mid toos ah, haddii aad isticmaalayso qalab dhis sida Webpack ama Parcel, ama la shaqaynta qaab-dhismeedka sida Next.js ama Gatsby.

Kordhi Helitaanka Tailwind CSS

Tailwind CSS waxay dhiirigelisaa naqshadda la heli karo iyadoo lagu darayo sifooyin kala duwan oo ARIA ah fasalladeeda. Abuur is-dhexyaal la heli karo oo dheeraad ah oo kor u qaad khibradda isticmaale ee qof kasta.

Ku isticmaal Awoodda Flexbox iyo Grid Tailwind CSS

Ka faa'iidayso qaababka qaabaynta CSS ee casriga ah sida Flexbox iyo Grid oo wata CSS Tailwind. Baro sida fasalada utility loogu isticmaali karo in lagu xakameeyo qaabaynta qaab dabacsan oo jawaab leh.

Sida loo Ciribtiro Mashruucyada CSS ee Dailwind kaaga

Tailwind CSS waxay bixisaa dhowr qalab iyo farsamooyin wax-ka-hortagga ah oo ka dhigaya aqoonsiga iyo xallinta arrimaha habaynta. Faham qalabkan oo kor u qaad xirfadahaaga wax ka saarista.

Samee Shabakad Midabo leh oo leh Tailwind CSS

Tailwind CSS waxay la socotaa palette ballaaran oo midabo la beddeli karo. Baro sida loo isticmaalo oo loo habeeyo midabadan si aad u abuurto nashqado firfircoon oo muuqaal leh.

Ku Samee Dhaqso leh Tailwind CSS 'JIT Mode

Si qoto dheer ugu dhaadhac qaabka Tailwind CSS's Just-In-time. Faham sida ay u shaqeyso iyo sida ay si weyn u dedejin karto horumarkaaga oo u dhisi karto waqtiyo.

Laga soo bilaabo Eber ilaa Hero: Master Tailwind CSS

Qaado safar aad ku baranayso Tailwind CSS. Laga soo bilaabo dejinta deegaankaaga ilaa sahaminta mawduucyada horumarsan, hagahan dhamaystiran ayaa kaa hadlay.

Habbee Tailwind CSS si aad u Baahato

Mid ka mid ah awoodaha ugu weyn ee Tailwind CSS waa dabacsanaanteeda. Baro sida loo habeeyo Tailwind si loo waafajiyo baahiyaha gaarka ah ee mashruucaaga.

La qabsashada Tailwind CSS

Ka qayb-qaado barashada gacan-ku-haynta adigoo isticmaalaya tusaalooyin taxane ah oo wax ku ool ah. Sahami sida loo dhiso qaybo kala duwan oo shabakad ah adoo isticmaalaya Tailwind CSS iyo DaisyUI.

Ka guurista Qaab-dhismeedka CSS kale una guurayo Tailwind CSS

Adigoo tixgelinaya u beddelashada Tailwind CSS? Faham farqiga muhiimka ah ee u dhexeeya Tailwind iyo qaab-dhismeedka kale, oo baro xeelado wax ku ool ah oo loogu haajiro mashaariicdaada.

Waxaad isticmaali kartaa DivMagic ama qalab la mid ah si aad u kordhiso xawaarahaaga socdaalka.

Qalabka horumarinta shabakadaha sida DivMagic waxay kuu oggolaanayaan inaad nuqul ka sameysid shay kasta naqshad kasta iyo qaab kasta oo ka mid ah shabakad kasta oo hal gujis ah.

Tusaale Fudud: Dhisidda Qayb Kaarka Jawaabta

Waa kuwan tusaale sida aad u dhisi karto qayb kaadh jawaab celin leh adoo isticmaalaya Tailwind CSS. Qaybtani waxay ka koobnaan doontaa sawir, cinwaan, iyo sharraxaad

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

Dhisida foom leh Tailwind CSS

Samaynta foom leh Tailwind CSS waa mid toos ah oo dareen leh. Halkan waxaa ah foomka xiriirka fudud:

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

Habaynta Tailwind CSS

Tailwind CSS waxay kuu ogolaanaysaa inaad habayso qaabaynteeda caadiga ah, adoo ku habaynaya fasalada tamarta baahidaada. Hoos waxaa ku yaal tusaale ah sida loo habeeyo palette midabka.

Tusaalooyinkani waxay muujinayaan dabacsanaanta iyo fududaanta Tailwind CSS, iyagoo muujinaya sida ay kaaga caawin karaan inaad u abuurto qaybo shabakadeed oo casri ah, jawaab celin leh si hufan oo waxtar leh.

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

Ma u baahanahay fayl CSS ah?

Faylka kaliya ee aad uga baahan tahay Tailwind CSS waa faylka tailwind.config.js.

Faylkaas ayaa hayn doona habaynta qaabayntaada. Ma qori doontid css ama ma lahaan doontid fayl css kale. Faylka qaabeynta ayaa ah midka kaliya ee aad u baahan doonto.

Waa maxay hababka ugu fiican ee Tailwind CSS?

Si aad u hesho sharraxaad faahfaahsan oo ku saabsan dhaqamada ugu fiican ee Tailwind CSS, fadlan eeg maqaalkeena kale ee Tailwind CSS Hababka ugu Wanaagsan.

Tailwind CSS: Mustaqbalka Naqshadaynta Shabkada

Ka fiirso sida Tailwind CSS ay u qaabaynayso mustaqbalka naqshadaynta shabakadda. Wax ka baro saamaynta ay ku leedahay iyo kartida koritaanka ee warshadaha horumarinta webka.