Tailwind CSS - HTML-den çykman häzirki zaman web sahypalaryny çalt guruň

Aseeňillik bilen çylşyrymly dizaýnlary dörediň

Tailwind CSS bilen çylşyrymly dizaýnlary döretmek şemal bolýar. Peýdaly synplaryň we täsirli dizaýn hyzmatlarynyň utgaşmasy, web sahypaňyzyň işleýşine we dowamlylygyna zyýan bermezden çylşyrymly düzülişleri aňsatlyk bilen dizaýn etmäge mümkinçilik berýär.

Islän zadyňyzy guruň

Tailwind CSS-iň gözelligi köp taraplylygyndadyr. Simpleönekeý blog sahypasyndan ösen elektron söwda platformasyna çenli islendik zady döredip bilersiňiz, şol bir wagtyň özünde birmeňzeş peýdaly sapaklary ulanýarsyňyz.

Siz diňe hyýalyňyz bilen çäklenýärsiňiz. Vanilla CSS-den peýdalanmagyň esasy tapawudy, ýörite dizaýnlary gurup boljak tizlikdir.

Div, div class, p class ýaly html komponentleri bolan adaty css synplaryny ulanmagyň adaty usuly elmydama bir wariant, ýöne Tailwind CSS bilen gelýän tizligi gowulaşdyrmak durmuşyňyzy aňsatlaşdyrýar.

Iň oňat tejribe işlemeýär

Däp bolşy ýaly, CSS global stilleriň toplumyny döretmek we olary komponent-komponent esasynda arassalamak bilen ýazylýar. Bu meşhur usul bolsa-da, uly, saklamak kyn koda sebäp bolup biler.

Tailwind CSS, ilkinji peýdaly CSS-iň has arassa we has ygtybarly çözgüt hödürleýändigini öňe sürüp, bu düşünje garşy çykýar.

Tailwind CSS üçin iň meşhur komponent kitaphanasy

daisyUI, Tailwind CSS üçin iň meşhur komponent kitaphanasy bolup, öňünden taýýarlanan 50-den gowrak komponent, 500+ peýdaly synplar we tükeniksiz mümkinçilikler bilen öwünýär. Her gezek täze taslama döredeniňizde tekeri täzeden dikeltmekden halas edýär.

Tigiri her gezek täzeden oýlap tapmaň

Tailwind CSS, her täze taslama üçin onlarça synp atlaryny ýazmagyň ýadaw prosesi bilen wagtyňyzy ýitirmegiň ýerine, gowy kesgitlenen, semantik peýdaly synplar toplumyny ulanmaga mümkinçilik berýär.

Bu sapaklar gaýtadan ulanylýar we CSS kaskady bilen sazlaşykly işleýär we ähli taslamalaryňyz üçin berk binýady üpjün edýär.

Tailwind CSS - Bir peýdaly ilkinji CSS çarçuwasy

“Tailwind CSS” özeninde peýdaly CSS çarçuwasydyr. Bu, gönüden-göni HTML-de islendik dizaýny gurmak üçin ulanyp boljak pes derejeli, birleşip boljak peýdaly synplary üpjün edýändigini aňladýar. Indi tükeniksiz CSS faýllary ýok, diňe ýönekeý we duýgur kod.

Semantik synp atlaryny ulanyň

Semantik synp atlary koduňyzyň okalmagyny ýokarlandyrýar, belli bir synpyň adyna seredip näme edýändigine düşünmegi aňsatlaşdyrýar. Bu, Tailwind CSS-iň döredijiniň tejribesini ýokarlandyrmak üçin kabul eden köp aýratynlyklaryndan biridir.

Arassa CSS. Çarçuwaly agnostik. Her ýerde işleýär

Tailwind CSS sizi belli bir çarçuwa bilen baglanyşdyrmaýar. Diňe arassa CSS, şonuň üçin ony islendik çarçuwada ýa-da asla çarçuwasyz ulanyp bilersiňiz. CSS-iň işleýän hemme ýerinde işleýär.

Tailwind CSS-iň peýdalary

Tailwind CSS-den peýdalanmagyň artykmaçlygy, öndürijiligiň ýokarlanmagyny, CSS faýlyň göwrüminiň peselmegini we peýdaly ilkinji usulyýet sebäpli ösen işläp düzüjiniň tejribesini öz içine alýar. Mundan başga-da, “Just-In-Time” (JIT) rejesi ýyldyrym çalt gurulýan wagtlary üpjün edýär we ösüş prosesiňizi hasam çaltlaşdyrýar.

Tailwind CSS bahasy

Tailwind CSS açyk çeşmeli taslama, bu ulanmak düýbünden mugt diýmekdir. Tailwind UI arkaly hödürlenýän UI komponentleri we şablonlary ýaly premium aýratynlyklara girmek isläniňizde çykdajy bolýar.

Şol bir wagtyň özünde pikirli we çeýe

Tailwind CSS, CSS-ni nädip düzmelidigi barada berk pikir berýär, ýöne özleşdirmäge rugsat berýän çeýe. Bu deňagramlylyk, iň möhümine - owadan UI-leri gurmaga mümkinçilik berýär.

Häzirki zaman aýratynlyklary

Tailwind CSS, Flexbox, Grid we aýratyn häsiýetler ýaly häzirki zaman aýratynlyklaryny öz içine alýar we häzirki zaman web programmalaryny ösdürmek üçin ajaýyp saýlama bolýar.

Tailwind CSS-ni ulanmagyň şertleri

Tailwind CSS ulanyp başlamazdan ozal HTML we CSS hakda esasy düşünje gerek.

Tailwind CSS-i haçan ulanmaly

Tailwind CSS uly ýa-da kiçi web taslamalarynyň hemmesi üçin amatly. CSS bilen göreşmekden we has täsirli, işläp düzüjiler üçin amatly çözgüt gözlemekden ýadasaňyz, Tailwind CSS siziň üçin.

Komponent çarçuwasyna dälmi?

“React” ýa-da “Vue” ýaly komponent çarçuwalarynyň muşdagy däl bolsaňyz, alada etmäň. Tailwind CSS çarçuwaly-agnostiki bolup, arassa HTML we JavaScript bilen ulanylyp bilner.

Tailwind CSS we beýleki CSS çarçuwalarynyň arasyndaky meňzeşlikler we tapawutlar

“Bootstrap” we “Foundation” ýaly beýleki çarçuwalar öňünden düzülen komponentleri hödürlän hem bolsa, “Tailwind CSS” size HTML-den çykman doly özboluşly dizaýnlary gurmak üçin gurallary berýär. Şeýle-de bolsa, daisyUI ýaly komponent kitaphanalarynyň birleşmegi bilen, indi iki dünýäniň iň gowularyndan lezzet alyp bilersiňiz.

Garaňky re .im

Tailwind CSS we daisyUI-iň soňky aýratynlyklaryndan biri, garaňky temaly web sahypalaryny synap görmäge mümkinçilik berýän garaňky re modeimdir.

Flexbox mysaly

Tailwind CSS, Flexbox ýaly häzirki zaman CSS aýratynlyklary bilen gowy birleşýär. Mysal üçin, flex, justify-center, element-center we ş.m. ýaly sapaklary ulanyp, täsirli düzüliş döredip bilersiňiz.

“Just-in-Time” -iň utgaşmasy bilen dürli peýdaly synp bahalaryny aňsatlyk bilen synap bilersiňiz. Bir peýdaly synp işlemedik bolsa, elementiňizi sazlamak üçin üýtgediň.

Flexbox düzüliş mysaly

Tailwind CSS ulanyp, täsirli nawigasiýa paneli ýaly çylşyrymly düzülişleri döretmek aňsat. Ine bir mysal:

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

Taýýar komponentler

Taslamaňyzda guýruk css koduny ulanmagy ýüregiňize düwen bolsaňyz, onlaýn deslapky komponentleri tapyp bilersiňiz. Bularyň islendigini göçürip alyp, öz web sahypaňyz üçin düzüp bilersiňiz.

CSS-ni Tailwind CSS-e nädip öwürmeli

CSS-ni Tailwind CSS synplaryna öwrüp bilmek, döredijileriň köpüsine zerur zat. Tailwind CSS bar bolmanka gurlan internetde köp web sahypasy bar. Bu web sahypalary stil tablisasy bilen css ulanýar we web ösüş hünärmenleri bu sahypalary Tailwind CSS-e göçürmek isleýärler.

“DivMagic” web dörediji we programma üpjünçiligini döredijiler üçin döredilen web ösüş guralydyr. Islendik stili vanil css-den Tailwind CSS-e göçürmäge mümkinçilik berýär. Bir gezek basmak bilen, internetdäki islendik komponenti Tailwind CSS-e öwrüp bilersiňiz we Tailwind-i taslamaňyzda ulanyp bilersiňiz we stili islän görnüşiňizde düzüp bilersiňiz.

Tailwind CSS filosofiýasyna çuňňur çümüň

Tailwind CSS-iň arkasyndaky pelsepe, peýdalylyga ünsi jemlemekdir. Diýmek, “Tailwind CSS” komponent synplaryny öňünden kesgitlemegiň ýerine, HTML-den çykman özboluşly dizaýn gurmaga mümkinçilik berýän pes derejeli peýdaly sapaklary hödürleýär.

Näme üçin adaty CSS-den daşlaşmaly?

Adaty CSS artykmaç ýazgylaryň, çişirilen faýllaryň we 'div çorbasynyň' aşa köp ulanylmagyna sebäp bolup biler. Tailwind CSS ýaly peýdaly ilkinji CSS çarçuwasyna geçmek bilen, bu meseleleri ýeňilleşdirip bilersiňiz, has arassa we tertipli kod bazasy.

Peýdaly synplaryň güýjüni başdan geçiriň

Peýdaly sapaklar, stil tablisalaryňyzda şol bir stili gaýtalamazlyga kömek edýär. "Özüňizi gaýtalamaň" (GURY) prinsipi. Bu sapaklar ep-esli wagt we güýji tygşytlaýar we ýokary derejede saklanyp bilinýän kod bazasyna alyp barýar.

Tailwind CSS direktiwalaryny öwrenmek

Tailwind CSS, stil tablisalaryňyzyň içinde ulanyp boljak birnäçe görkezmeleri hödürleýär. Bulara @apply, @variants we @ ekran degişlidir. Bu görkezmelere düşünmek we ulanmak Tailwind CSS tejribäňizi ep-esli ýokarlandyryp biler. Bular Tailwind Config CSS faýlynda ýerleşdirilip bilner. Bu çemeleşmäni ulanyp css sapaklaryny ýazyp bilersiňiz.

Tailwind CSS-i pluginler bilen giňeldiň

Tailwind CSS, täze funksiýa goşup ýa-da bar bolanlaryny özleşdirip, pluginler bilen giňeldilip bilner. Web taslamalaryňyzyň netijeliligini we estetikasyny ýokarlandyrmak üçin pluginleri nädip ulanmalydygyny öwreniň.

Tailwind CSS-i iş prosesiňize goşuň

“Tailwind CSS” -ni ösüş iş prosesiňize birleşdirmek, Webpack ýa-da Parcel ýaly gurluşyk gurallaryny ulanýarsyňyzmy ýa-da Next.js ýa-da Gatsby ýaly çarçuwalar bilen işleýärsiňizmi.

Tailwind CSS bilen elýeterliligi ýokarlandyrmak

Tailwind CSS, sapaklaryna ARIA atributlarynyň bir toparyny goşmak bilen elýeterli dizaýny höweslendirýär. Has elýeterli interfeýsleri dörediň we hemmeler üçin ulanyjy tejribesini ýokarlandyryň.

Tailwind CSS bilen Flexbox we Grid-iň güýjüni ulanyň

Tailwind CSS bilen Flexbox we Grid ýaly häzirki zaman CSS ýerleşiş modullaryny ulanyň. Çeýe we täsirli görnüşde ýerleşişe gözegçilik etmek üçin peýdaly sapaklaryň nähili ulanylyp bilinjekdigini öwreniň.

Tailwind CSS taslamalaryňyzy nädip düzetmeli

Tailwind CSS, dizaýn meselelerini kesgitlemegi we çözmegi aňsatlaşdyrýan birnäçe düzediş gurallaryny we usullaryny hödürleýär. Bu gurallara düşüniň we düzediş endikleriňizi ösdüriň.

Tailwind CSS bilen reňkli web dörediň

Tailwind CSS özboluşly reňkleriň giň palitrasy bilen gelýär. Janly we görmegeý dizaýnlary döretmek üçin bu reňkleri nähili ulanmalydygyny we sazlamagyny öwreniň.

Tailwind CSS 'JIT rejesi bilen has çalt ösdüriň

Tailwind CSS-iň “Wagtynda” re modeimine has çuňňur öwreniň. Onuň nähili işleýändigini we ösüşiňizi ep-esli çaltlaşdyryp we wagt gurup biljekdigine düşüniň.

Noldan Gahrymana: Master Tailwind CSS

Tailwind CSS-ni özleşdirmek üçin syýahata başlaň. Daşky gurşawyňyzy gurmakdan başlap, ösen mowzuklary öwrenmeklige çenli bu giňişleýin gollanma size ünsi çekdi.

Tailwind CSS-i zerurlyklaryňyza düzüň

Tailwind CSS-iň iň güýçli taraplaryndan biri onuň çeýeligi. Taslamaňyzyň aýratyn zerurlyklaryna laýyk Tailwind-i nädip sazlamalydygyny öwreniň.

Tailwind CSS bilen el-ele almak

Birnäçe amaly mysallar arkaly el bilen öwrenişiň. Tailwind CSS we DaisyUI ulanyp, dürli web komponentlerini nädip gurmalydygyny öwreniň.

Beýleki CSS Çarçuwalaryndan Tailwind CSS-e göçmek

Tailwind CSS-e geçmegi göz öňünde tutýarsyňyzmy? Tailwind we beýleki çarçuwalaryň arasyndaky esasy tapawutlara düşüniň we taslamalaryňyzy göçürmek üçin täsirli strategiýalary öwreniň.

Migrasiýa tizligiňizi ep-esli ýokarlandyrmak üçin DivMagic ýa-da şuňa meňzeş gurallary ulanyp bilersiňiz.

DivMagic ýaly web ösüş gurallary, islendik elementi islendik dizaýny we islendik stili islendik web sahypasyndan bir gezek basyp göçürmäge mümkinçilik berýär.

Pleönekeý mysal: Jogap beriji kart komponentini gurmak

Ine, Tailwind CSS ulanyp, täsirli kartoçka komponentini nädip gurup boljakdygynyň mysaly. Bu komponentde şekil, at we düşündiriş bolar.

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

Tailwind CSS bilen forma gurmak

Tailwind CSS bilen forma döretmek gönümel we içgin. Ine, ýönekeý aragatnaşyk formasy:

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

Tailwind CSS-i özleşdirmek

Tailwind CSS, peýdaly synplary zerurlyklaryňyza laýyklaşdyryp, deslapky konfigurasiýasyny sazlamaga mümkinçilik berýär. Aşakda reňk palitrasyny nädip sazlamalydygynyň mysaly.

Bu mysallar Tailwind CSS-iň çeýeligini we ýönekeýligini görkezýär, häzirki zaman, täsirli web komponentlerini täsirli we täsirli döretmäge nädip kömek edip biljekdigini görkezýär.

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

Maňa CSS faýly gerekmi?

Tailwind CSS bilen zerur ýeke-täk faýl tailwind.config.js faýlydyr.

Şol faýl konfigurasiýa sazlamalaryňyzy saklar. Css ýazmarsyňyz ýa-da başga css faýlyňyz bolmaz. Bu konfigurasiýa faýly size gerek boljak ýeke-täk faýl.

Tailwind CSS üçin iň oňat tejribeler haýsylar?

Tailwind CSS-iň öňdebaryjy tejribeleri barada jikme-jik düşündiriş almak üçin, Tailwind CSS iň oňat tejribeler baradaky beýleki makalamyza serediň.

Tailwind CSS: Web dizaýnynyň geljegi

Tailwind CSS-iň web dizaýnynyň geljegini nähili emele getirýändigi barada pikirleniň. Web ösüş pudagynda onuň täsiri we ösüş potensialy barada öwreniň.