Tailwind CSS - Malperên nûjen bilez bêyî ku HTML-ya xwe bihêlin ava bikin

Sêwiranên tevlihev bi hêsanî biafirînin

Bi Tailwind CSS re, afirandina sêwiranên tevlihev dibe bayek. Kombûna dersên karûbar û karûbarên sêwirana bersivdar dihêle hûn bi hêsanî sêwiranên tevlihev sêwirînin, bêyî ku tawîz bidin ser performans û domandina malpera xwe.

Tiştek çêbikin

Bedewiya Tailwind CSS di pirrengiya wê de ye. Hûn dikarin ji rûpelek blogek hêsan heya platformek e-bazirganiya pêşkeftî tiştek biafirînin, hemî dema ku heman dersên kargêriya xwerû bikar tînin.

Hûn tenê ji hêla xeyalê xwe ve têne sînor kirin. Cûdahiya sereke ji karanîna Vanilla CSS leza ku hûn dikarin sêwiranên xwerû ava bikin e.

Nêzîkatiya kevneşopî ya karanîna dersên css-ê yên xwerû bi hêmanên html-ê yên mîna div, çîna div, pola p her gav vebijarkek e lê baştirkirina leza ku bi Tailwind CSS re tê jiyana we hêsantir dike.

Pratîkên çêtirîn bi rastî ne kar dikin

Kevneşopî, CSS bi damezrandina komek şêwazên gerdûnî û paqijkirina wan li ser bingeha pêkhateyek-bi-pêk tê nivîsandin. Dema ku ev rêbazek populer e, ew dikare bibe sedema kodek mezin, dijwar-parastin.

Tailwind CSS vê têgînê diceribîne, argûman dike ku CSS-ya yekem-karûbar çareseriyek paqijtir, domdartir pêşkêşî dike.

Pirtûkxaneya pêkhateya herî populer a ji bo Tailwind CSS

daisyUI ji bo Tailwind CSS pirtûkxaneya hêmanên herî populer e, ku bi zêdetirî 50 hêmanên pêş-sêwirandî, 500+ dersên karûbar, û hema hema îmkanên bêdawî pesnê xwe dide. Her gava ku hûn projeyek nû diafirînin, we ji nûvekirina çerxê xilas dike.

Her carê Tekerê ji nû ve îcad nekin

Li şûna ku hûn wextê xwe bi pêvajoya westandina nivîsandina bi dehan navên polê ji bo her projeyek nû winda bikin, Tailwind CSS dihêle hûn komek çînên karûbar a xweş diyarkirî, semantîk bikar bînin.

Van ders ji nû ve têne bikar anîn û bi kaska CSS re bi ahengî dixebitin, ji bo hemî projeyên we bingehek zexm peyda dikin.

Tailwind CSS - Çarçoveyek Yekem a CSS-ê ya Karûbar

Di bingeha xwe de, Tailwind CSS çarçoveyek CSS-ya yekem-karsaz e. Ev tê vê wateyê ku ew dersên kargêriya nizm, pêkhatî peyda dike ku hûn dikarin bikar bînin da ku hûn her sêwiranê, rasterast di HTML-a xwe de ava bikin. Ne pelên CSS-ê yên bêdawî, tenê kodek hêsan û xwerû.

Navên Dersa Semantîk bikar bînin

Navên çîna semantîk xwendina koda we çêtir dike, û hêsantir dike ku hûn fêm bikin ka çînek taybetî tenê bi lênihêrîna navê xwe çi dike. Ev yek ji gelek taybetmendiyên ku Tailwind CSS pejirandî ye ku ezmûna pêşdebiran baştir bike.

CSS paqij. Çarçoveya Agnostic. Li her derê dixebite

Tailwind CSS we bi çarçoveyek taybetî ve girê nade. Ew bi tenê CSS-ya paqij e, ji ber vê yekê hûn dikarin wê bi her çarçoveyek, an jî bêyî çarçoveyek bi tevahî bikar bînin. Ew li her cîhê ku CSS dixebite dixebite.

Feydeyên Tailwind CSS

Feydeyên karanîna Tailwind CSS zêdekirina hilberîneriyê, kêmbûna mezinahiya pelê CSS, û ezmûnek pêşdebir a pêşkeftî ji ber metodolojiya yekem-karsaziyê vedihewîne. Wekî din, moda Just-In-Time (JIT) demên çêkirina birûsk-lez peyda dike, ku pêvajoya pêşkeftina we bêtir bilez dike.

Tailwind CSS Pricing

Tailwind CSS projeyek çavkaniya vekirî ye, ku tê vê wateyê ku karanîna wê bi tevahî belaş e. Mesref tê dema ku hûn dixwazin bigihîjin taybetmendiyên premium ên mîna pêkhateyên UI û şablonên ku bi navgîniya Tailwind UI ve têne pêşkêş kirin.

Di heman demê de nêrîn û nerm e

Tailwind CSS nerînek xurt peyda dike ka meriv çawa CSS-ya xwe ava dike, di heman demê de ew têra xwe maqûl e ku destûrê bide xwerûkirinê. Ev hevseng dihêle hûn bala xwe bidin tiştên ku herî girîng in - avakirina UI-yên xweşik.

Taybetmendiyên nûjen

Tailwind CSS taybetmendiyên nûjen ên mîna Flexbox, Grid, û taybetmendiyên xwerû hembêz dike, ku ew ji bo pêşkeftina serîlêdanên webê yên nûjen vebijarkek hêja dike.

Pêdiviyên ji bo Bikaranîna Tailwind CSS

Berî ku hûn dest bi karanîna Tailwind CSS-ê bikin, hûn hewce ne ku têgihîştina bingehîn a HTML û CSS-ê.

Dema ku meriv Tailwind CSS bikar bîne

Tailwind CSS ji bo her cûre projeyên malperê, mezin an piçûk, maqûl e. Ger hûn ji şerkirina bi CSS re westiyayî ne û li çareseriyek bikêrtir, pêşdebir-dostan digerin, wê hingê Tailwind CSS ji bo we ye.

Ne di çarçoveya pêkhateyan de?

Ger hûn ne heyranê çarçoveyên pêkhateyên mîna React an Vue ne, xem nake. Tailwind CSS çarçove-agnostîk e û dikare bi HTML û JavaScript-a paqij re were bikar anîn.

Wekhevî û Cûdahî Di Navbera Tailwind CSS û Çarçoveyên CSS yên din de

Dema ku çarçoveyên din ên mîna Bootstrap û Weqfê hêmanên pêş-sêwirandî pêşkêşî dikin, Tailwind CSS amûran dide we ku hûn sêwiranên bi tevahî xwerû ava bikin bêyî ku hûn HTML-ya xwe berdin. Lêbelê, bi yekbûna pirtûkxaneyên pêkhateyên mîna daisyUI, hûn naha dikarin ji her du cîhanan çêtirîn kêfê bikin.

Moda Dark

Yek ji taybetmendiyên herî paşîn ên Tailwind CSS û daisyUI moda tarî ye, ku dihêle hûn malperên bi temaya tarî bi hêsanî biafirînin.

Mînak Flexbox

Tailwind CSS bi taybetmendiyên nûjen ên CSS yên mîna Flexbox re baş yek dike. Mînakî, hûn dikarin bi karanîna çînên mîna flex, justify-centre, element-navenda, û hwd, nexşeyek bersivdar biafirînin.

Bi tevhevkirina Just-in-Time, hûn dikarin bi hêsanî nirxên çîna karanîna cûda biceribînin. Ger yek pola karûbar nexebite, tenê wê biguhezîne da ku hêmana xwe xweş bike.

Mînakek Layout Flexbox

Bi karanîna Tailwind CSS-ê, hêsan e ku meriv sêwiranên tevlihev ên mîna barek navîgasyonê ya bersivdar biafirîne. Li vir mînakek heye:

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

pêkhateyên amade

Ger we biryar da ku hûn di projeya xwe de koda css-a tailwind bikar bînin, hûn ê bikaribin gelek hêmanên pêşdibistanê serhêl bibînin. Hûn dikarin yek ji van kopî bikin û ji bo malpera xwe xweş bikin.

Meriv çawa CSS-ê vediguheze Tailwind CSS

Ku meriv bikaribe CSS-ê li dersên Tailwind CSS-ê veguherîne tiştek ku pir pêşdebiran hewce dike ye. Li ser înternetê gelek malper hene ku berî hebûna Tailwind CSS hatine çêkirin. Van rûpelên malperê css-ê bi şêwazê bikar tînin û pisporên pêşkeftina malperê dixwazin van rûpelan veguhezînin Tailwind CSS.

DivMagic amûrek pêşkeftina malperê ye ku ji bo pêşdebirên malperê û pêşdebirên nermalavê hatî çêkirin. Ew dihêle ku her şêwazek ji css vanilla heya Tailwind CSS were kopî kirin. Bi yek klîk, hûn dikarin her pêkhateyek li ser înternetê veguherînin Tailwind CSS û Tailwind-ê di projeya xwe de bikar bînin û şêwazê ku hûn dixwazin xweş bikin.

Di Felsefeya Tailwind CSS de kûr bikevin

Felsefeya li pişt Tailwind CSS ev e ku balê bikişîne ser kêrhatî. Ev tê vê wateyê ku li şûna ku çînên hêmanan ji berê ve diyar bike, Tailwind CSS dersên kargêriya nizm peyda dike ku dihêle hûn bêyî ku HTML-ya xwe berdin sêwiranên bêhempa ava bikin.

Çima Ji CSS-ya Kevneşopî Dûr Bikevin?

CSS-ya kevneşopî dibe ku bibe sedema karanîna zêde ya serkêşan, pelên zirav, û 'şorba div'. Bi guheztina çarçoveyek CSS-ya yekem a wekî Tailwind CSS, hûn dikarin van pirsgirêkan sivik bikin, ku di encamê de bingehek kodek paqijtir, sadetir çêbibe.

Ezmûna Hêza Dersên Karûbar

Dersên bikêrhatî ji we re dibe alîkar ku hûn li seranserê şêwazên xwe heman şêwazan dubare nekin. Ew prensîbek "Xwe Dubare Nekin" (DRY) ye. Van ders ji we dem û hewildanek girîng xilas dikin û dibin sedema bingehek kodek pir domdar.

Lêgerîna Tailwind CSS Rêbernameyên

Tailwind CSS çend rêwerzan destnîşan dike ku dikarin di nav şêwazên we de werin bikar anîn. Vana @apply, @variants, û @screen hene. Fêmkirin û karanîna van rêwerzan dikare ezmûna weya Tailwind CSS pir zêde bike. Vana dikarin di pelê Tailwind Config CSS de bêne danîn. Hûn dikarin dersên css bi karanîna vê rêbazê binivîsin.

Tailwind CSS bi Pluginan re dirêj bikin

Tailwind CSS dikare bi pêvekan re were dirêj kirin, fonksiyonek nû lê zêde bike an ya heyî xweş bike. Fêr bibin ka meriv çawa pêvekan bi kar tîne da ku karîgerî û estetîka projeyên xweya webê zêde bike.

Tailwind CSS-ê têxe nav xebata xwe

Yekkirina Tailwind CSS-ê di xebata pêşkeftina we de rasterast e, gelo hûn amûrên çêkirinê yên wekî Webpack an Parcel bikar tînin, an jî bi çarçoveyên mîna Next.js an Gatsby re dixebitin.

Bi Tailwind CSS re Gihîştinê zêde bikin

Tailwind CSS sêwirana gihîştî teşwîq dike bi tevlêbûna rêzek taybetmendiyên ARIA di polên xwe de. Têkiliyên bêtir gihîştî biafirînin û ezmûna bikarhêner ji bo her kesî zêde bikin.

Hêza Flexbox û Grid-ê bi Tailwind CSS-ê re bikar bînin

Bi Tailwind CSS re modulên sêwirana CSS-ê yên nûjen ên mîna Flexbox û Grid bikar bînin. Fêr bibin ka dersên karûbar çawa dikarin werin bikar anîn da ku sêwirana bi rengek maqûl û bersivdar kontrol bikin.

Meriv çawa Projeyên CSS-ya Tailwind-a xwe Debug bike

Tailwind CSS gelek amûr û teknîkên debuggkirinê peyda dike ku tespîtkirin û çareserkirina pirsgirêkên şêwazê hêsantir dike. Van amûran fam bikin û jêhatîbûnên xweyên debugkirinê zêde bikin.

Bi Tailwind CSS re Webek rengîn biafirînin

Tailwind CSS bi paletek berfireh a rengên xwerû tê. Fêr bibin ka meriv çawa van rengan bikar tîne û xweş dike da ku sêwiranên zindî û bi dîtbarî biafirîne.

Bi Moda JIT-ê ya Tailwind CSS re Zûtir pêşve bibin

Di moda Just-In-Time ya Tailwind CSS de kûrtir bigerin. Fêm bikin ka ew çawa dixebite û çawa dikare bi girîngî pêşveçûn û avakirina we zûtir bike.

Ji Zero berbi Hero: Master Tailwind CSS

Dest bi rêwîtiyek ji bo serweriya Tailwind CSS bikin. Ji sazkirina hawîrdora xwe bigire heya vekolîna mijarên pêşkeftî, vê rêberê berfireh we vedihewîne.

Tailwind CSS li gorî hewcedariyên xwe xweş bikin

Yek ji hêza herî mezin a Tailwind CSS nermbûna wê ye. Fêr bibin ka meriv çawa Tailwind-ê li gorî hewcedariyên taybetî yên projeya xwe xweş bike.

Bi Tailwind CSS-ê re dest pê kirin

Di nav rêzek nimûneyên pratîkî de beşdarî fêrbûna destan bibin. Vegerînin ka meriv çawa bi karanîna Tailwind CSS û DaisyUI cûrbecûr pêkhateyên malperê ava dike.

Koçberî ji Çarçoveyên CSS yên din berbi Tailwind CSS

Hûn difikirin ku veguheztina Tailwind CSS? Cûdahiyên sereke di navbera Tailwind û çarçoveyên din de fêm bikin, û ji bo koçberkirina projeyên xwe stratejiyên bi bandor fêr bibin.

Hûn dikarin DivMagic an amûrên mîna wan bikar bînin da ku leza koça xwe bi girîngî zêde bikin.

Amûrên pêşkeftina malperê yên mîna DivMagic dihêle hûn bi yek klîk her hêmanek sêwiran û şêwazek ji her malperê kopî bikin.

Mînakek Hêsan: Avakirina Parçeyek Qerta Bersiv

Li vir mînakek e ku hûn çawa dikarin bi karanîna Tailwind CSS-ê kartek bersivdar ava bikin. Ev hêman dê wêneyek, sernav û ravekek hebe.

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

Avakirina formek bi Tailwind CSS

Afirandina formek bi Tailwind CSS re rasterast û xwerû ye. Li vir formek têkiliyê ya hêsan heye:

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

Xweserkirina Tailwind CSS

Tailwind CSS dihêle hûn konfigurasyona xweya xwerû xweş bikin, dersên karûbar li gorî hewcedariyên we biguncînin. Li jêr mînakek heye ku meriv çawa paleta rengan xweş bike.

Van mînakan nermbûn û sadebûna Tailwind CSS-ê destnîşan dikin, destnîşan dikin ka ew çawa dikarin ji we re bibin alîkar ku hûn hêmanên tevna nûjen, bersivdar bi bandor û bi bandor biafirînin.

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

Ma ez ê hewceyê pelê CSS-ê hewce bikim?

Tenê pelê ku hûn bi Tailwind CSS re hewce dikin pelê tailwind.config.js e.

Ew pel dê mîhengên veavakirina we bigire. Hûn ê css-ê nenivîsin an jî pelek css-ya din hebe. Ev pelê vesazkirinê tenê yek e ku hûn ê hewce bibin.

Ji bo Tailwind CSS pratîkên çêtirîn çi ne?

Ji bo ravekirina berfireh li ser pratîkên çêtirîn ên Tailwind CSS, ji kerema xwe li gotara meya din a Pratîkên çêtirîn Tailwind CSS bibînin.

Tailwind CSS: Pêşeroja Sêwirana Malperê

Bifikirin ka Tailwind CSS çawa pêşeroja sêwirana malperê çêdike. Di pîşesaziya pêşkeftina malperê de li ser bandor û potansiyela wê ya mezinbûnê fêr bibin.