Tailwind CSS - Gina gidajen yanar gizo na zamani da sauri ba tare da barin HTML ɗinku ba

Ƙirƙirar Ƙirƙirar Ƙirar Ƙira tare da Sauƙi

Tare da Tailwind CSS, ƙirƙirar ƙira mai rikitarwa ya zama iska. Haɗin azuzuwan masu amfani da kayan aikin ƙira masu amsawa suna ba ku damar tsara shimfidu masu banƙyama tare da sauƙi, ba tare da ɓata aiki da kiyaye gidan yanar gizon ku ba.

Gina komai

Kyakkyawan Tailwind CSS ya ta'allaka ne a cikin iyawar sa. Kuna iya ƙirƙirar wani abu daga shafin yanar gizo mai sauƙi zuwa dandamalin kasuwancin e-commerce na ci gaba, duk yayin amfani da azuzuwan masu amfani iri ɗaya.

Kuna iyakance kawai da tunanin ku. Babban bambanci daga amfani da Vanilla CSS shine saurin da zaku iya gina ƙirar al'ada.

Hanyar al'ada ta amfani da azuzuwan css na al'ada tare da abubuwan html kamar div, div class, p class koyaushe zaɓi ne amma haɓakar saurin da ke zuwa tare da Tailwind CSS yana sa rayuwar ku sauƙi.

Mafi kyawun ayyuka ba sa aiki a zahiri

A al'adance, an rubuta CSS ta hanyar kafa tsarin salo na duniya da kuma tace su bisa ga wani bangare-by-bangaren. Duk da yake wannan sanannen hanya ce, yana iya haifar da girma, mai wuyar kiyaye lamba.

Tailwind CSS ya ƙalubalanci wannan ra'ayi, yana jayayya cewa mai amfani-CSS na farko yana ba da mafi tsafta, ƙarin mafita.

Mafi shaharar ɗakin karatu don Tailwind CSS

daisyUI shine mashahurin ɗakin karatu na kayan aikin Tailwind CSS, yana alfahari da abubuwan da aka riga aka tsara 50, azuzuwan masu amfani 500+, da yuwuwar kusan marasa iyaka. Yana ceton ku daga sake ƙirƙira dabaran duk lokacin da kuka ƙirƙiri sabon aiki.

Kada Ku Sake Ƙirƙirar Dabarun Kowane Lokaci

Maimakon ɓata lokacinku tare da aiki mai wahala na rubuta tarin sunayen aji don kowane sabon aiki, Tailwind CSS yana ba ku damar amfani da ingantaccen tsarin azuzuwan amfani.

Ana iya sake amfani da waɗannan azuzuwan kuma suna aiki cikin jituwa tare da CSS cascade, suna samar muku da tushe mai ƙarfi don duk ayyukanku.

Tailwind CSS - Tsarin CSS na Farko mai amfani

A ainihin sa, Tailwind CSS shine tsarin CSS na farko mai amfani. Wannan yana nufin yana ba da ƙananan matakan, azuzuwan kayan amfani waɗanda za ku iya amfani da su don gina kowane ƙira, kai tsaye a cikin HTML ɗinku. Babu sauran fayilolin CSS marasa iyaka, kawai lamba mai sauƙi da fahimta.

Yi amfani da Sunayen Aji na Semantic

Sunayen azuzuwan nasiha suna haɓaka iya karanta lambar ku, yana sauƙaƙa fahimtar abin da takamaiman aji ke yi kawai ta hanyar duba sunansa. Wannan yana ɗaya daga cikin abubuwa da yawa da Tailwind CSS ya ɗauka don haɓaka ƙwarewar haɓakawa.

Tsaftace CSS. Tsarin Agnostic. Yana Aiki Ko'ina

Tailwind CSS ba ya ɗaure ku ga kowane takamaiman tsari. Yana da kawai CSS mai tsabta, don haka zaka iya amfani da shi tare da kowane tsari, ko ma ba tare da wani tsari ba. Yana aiki a duk inda CSS ke aiki.

Fa'idodin Tailwind CSS

Fa'idodin amfani da Tailwind CSS sun haɗa da ƙara yawan aiki, rage girman fayil ɗin CSS, da ingantaccen ƙwarewar haɓakawa saboda hanyar amfani-farko. Bugu da ƙari, yanayin Just-In-Time (JIT) yana ba da lokutan ginawa cikin saurin walƙiya, yana ƙara haɓaka tsarin haɓaka ku.

Farashin CSS na Tailwind

Tailwind CSS shiri ne na buɗe ido, wanda ke nufin yana da cikakken 'yanci don amfani. Farashin yana zuwa lokacin da kake son samun damar fasalulluka masu ƙima kamar abubuwan haɗin UI da samfuri, waɗanda ake bayarwa ta Tailwind UI.

Yana da ra'ayi da sassauƙa a lokaci guda

Tailwind CSS yana ba da ra'ayi mai ƙarfi kan yadda ake tsara CSS ɗin ku, duk da haka yana da sauƙi don ba da damar keɓancewa. Wannan ma'auni yana ba ku damar mai da hankali kan abin da ya fi mahimmanci - gina kyawawan UI.

Siffofin zamani

Tailwind CSS ya rungumi fasali na zamani kamar Flexbox, Grid, da kaddarorin al'ada, yana mai da shi kyakkyawan zaɓi don haɓaka aikace-aikacen gidan yanar gizo na zamani.

Abubuwan da ake buƙata don Amfani da Tailwind CSS

Kafin ka fara amfani da Tailwind CSS, kana buƙatar fahimtar asali na HTML da CSS.

Lokacin Amfani da Tailwind CSS

Tailwind CSS ya dace da kowane nau'in ayyukan gidan yanar gizo, babba ko ƙarami. Idan kun gaji da kokawa tare da CSS kuma kuna neman mafi inganci, mafita mai haɓakawa, to Tailwind CSS na gare ku.

Ba a cikin tsarin sassa?

Idan ba kai bane mai son tsarin sassa kamar React ko Vue, babu damuwa. Tailwind CSS shine tsarin-agnostic kuma ana iya amfani dashi tare da HTML da JavaScript.

Kamanceceniya da Banbance-banbance Tsakanin Tailwind CSS da Sauran Tsarin CSS

Yayin da sauran tsarin kamar Bootstrap da Foundation suna ba da abubuwan da aka riga aka tsara, Tailwind CSS yana ba ku kayan aikin don gina ƙirar al'ada gaba ɗaya ba tare da barin HTML ɗinku ba. Koyaya, tare da haɗin ɗakunan karatu kamar daisyUI, yanzu zaku iya jin daɗin mafi kyawun duniyoyin biyu.

Yanayin duhu

Ɗaya daga cikin sabbin fasalulluka na Tailwind CSS da daisyUI shine yanayin duhu, wanda ke ba ku damar ƙirƙirar gidajen yanar gizo masu duhu ba tare da wahala ba.

Misalin Flexbox

Tailwind CSS yana haɗawa da kyau tare da fasalin CSS na zamani kamar Flexbox. Misali, zaku iya ƙirƙirar shimfidar amsawa ta amfani da azuzuwan kamar sassauƙa, cibiyar barata, cibiyar abubuwa, da sauransu.

Tare da haɗin Just-in-Time, zaku iya gwada ƙimar ajin masu amfani daban-daban cikin sauƙi. Idan ɗayan mai amfani bai yi aiki ba, kawai canza shi don keɓance nau'in ku.

Misalin Tsarin Flexbox

Yin amfani da Tailwind CSS, yana da sauƙi don ƙirƙirar rikitattun shimfidu kamar sandar kewayawa mai amsawa. Ga misali:

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

Abubuwan da aka shirya

Idan kun yanke shawarar yin amfani da lambar css na wutsiya a cikin aikinku, za ku sami damar samun abubuwan da aka riga aka yi da yawa akan layi. Kuna iya kwafi kowane ɗayan waɗannan kuma ku keɓance don gidan yanar gizon ku.

Yadda ake canza CSS zuwa Tailwind CSS

Samun damar canza CSS zuwa azuzuwan Tailwind CSS abu ne da yawancin masu haɓakawa ke buƙata. Akwai gidajen yanar gizo da yawa akan intanet da aka gina kafin Tailwind CSS ta wanzu. Waɗannan shafukan yanar gizon suna amfani da css tare da rubutun salo kuma ƙwararrun ci gaban yanar gizo suna son ƙaura waɗannan shafuka zuwa Tailwind CSS.

DivMagic kayan aikin haɓaka gidan yanar gizo ne wanda aka gina don masu haɓaka gidan yanar gizo da masu haɓaka software. Yana ba da damar kowane salo don kwafi daga vanilla css zuwa Tailwind CSS. Tare da dannawa ɗaya, zaku iya canza duk wani abu akan intanet zuwa Tailwind CSS kuma kuyi amfani da Tailwind a cikin aikin ku kuma tsara salon yadda kuke so.

Zurfafa Zurfafa cikin Tailwind CSS Falsafa

Falsafar da ke bayan Tailwind CSS ita ce mayar da hankali kan amfani. Wannan yana nufin maimakon ƙaddamar da azuzuwan sassa, Tailwind CSS yana ba da ƙananan azuzuwan masu amfani waɗanda ke ba ku damar ƙirƙirar ƙira na musamman ba tare da barin HTML ɗinku ba.

Me yasa Kaura daga CSS na Gargajiya?

CSS na gargajiya na iya haifar da wuce gona da iri na wuce gona da iri, kumbura fayiloli, da 'miyar div'. Ta hanyar matsawa zuwa tsarin CSS na farko-mai amfani kamar Tailwind CSS, zaku iya rage waɗannan batutuwan, haifar da mafi tsafta, ingantaccen tsarin codebase.

Ƙware Ƙarfin Ƙarfafa Azuzuwan Amfani

Azuzuwan masu amfani suna taimaka muku don guje wa maimaita salo iri ɗaya a cikin zanen salon ku. Ka'ida ce ta "Kada ku Maimaita Kanku" (DRY). Waɗannan azuzuwan suna ceton ku gagarumin lokaci da ƙoƙari kuma suna haifar da ƙwaƙƙwaran ƙididdiga masu inganci.

Binciko Tailwind CSS Umarnin

Tailwind CSS yana gabatar da ƴan umarni waɗanda za a iya amfani da su a cikin takaddun salon ku. Waɗannan sun haɗa da @apply, @variants, da @screen. Fahimtar da amfani da waɗannan umarnin na iya haɓaka ƙwarewar ku ta Tailwind CSS sosai. Ana iya sanya waɗannan a cikin fayil ɗin Tailwind Config CSS. Kuna iya rubuta azuzuwan css ta amfani da wannan hanyar.

Ƙara Tailwind CSS tare da Plugins

Za a iya tsawaita Tailwind CSS tare da plugins, ƙara sabon ayyuka ko keɓance wanda yake. Koyi yadda ake amfani da plugins don haɓaka inganci da kyawun ayyukan gidan yanar gizon ku.

Haɗa Tailwind CSS cikin Gudun Aikinku

Haɗa Tailwind CSS cikin ayyukan haɓakawa kai tsaye, ko kuna amfani da kayan aikin gini kamar Webpack ko Parcel, ko aiki tare da tsarin kamar Next.js ko Gatsby.

Haɓaka Dama tare da Tailwind CSS

Tailwind CSS yana ƙarfafa ƙirar ƙira ta haɗa nau'ikan halayen ARIA a cikin azuzuwan sa. Ƙirƙirar ƙarin hanyoyin sadarwa masu sauƙi kuma haɓaka ƙwarewar mai amfani ga kowa da kowa.

Yi amfani da ƙarfin Flexbox da Grid tare da Tailwind CSS

Yi amfani da tsarin shimfidar CSS na zamani kamar Flexbox da Grid tare da Tailwind CSS. Koyi yadda za'a iya amfani da azuzuwan masu amfani don sarrafa shimfidar wuri a cikin sassauƙa da amsawa.

Yadda Ake Cire Ayyukan CSS ɗinku na Tailwind

Tailwind CSS yana ba da kayan aikin gyara da yawa da dabaru waɗanda ke sauƙaƙe ganowa da warware matsalolin salo. Fahimtar waɗannan kayan aikin kuma haɓaka ƙwarewar gyara kuskurenku.

Ƙirƙirar Yanar Gizo mai launi tare da Tailwind CSS

Tailwind CSS ya zo tare da faffadan palette na launuka masu iya canzawa. Koyi yadda ake amfani da kuma keɓance waɗannan launuka don ƙirƙirar ƙira mai ban sha'awa da gani.

Haɓaka da sauri tare da Yanayin Tailwind CSS' JIT

Zurfafa zurfafa cikin yanayin Tailwind CSS's Just-In-Love. Fahimtar yadda yake aiki da kuma yadda zai iya hanzarta haɓaka haɓakar ku da haɓaka lokutan ku.

Daga Zero zuwa Jarumi: Jagora Tailwind CSS

Shiga tafiya don ƙwarewar Tailwind CSS. Daga kafa mahallin ku zuwa bincika manyan batutuwa, wannan cikakkiyar jagorar ta rufe ku.

Keɓance Tailwind CSS zuwa Bukatunku

Ɗaya daga cikin mafi girman ƙarfin Tailwind CSS shine sassauci. Koyi yadda ake keɓance Tailwind don dacewa da takamaiman bukatun aikinku.

Samun Hannu tare da Tailwind CSS

Shiga cikin ilmantarwa ta hanyar jerin misalai masu amfani. Bincika yadda ake gina abubuwan haɗin yanar gizo iri-iri ta amfani da Tailwind CSS da DaisyUI.

Hijira daga Sauran Tsarin CSS zuwa Tailwind CSS

Ana la'akari da canzawa zuwa Tailwind CSS? Fahimtar mahimman bambance-bambance tsakanin Tailwind da sauran tsarin, kuma koyi ingantattun dabaru don ƙaura ayyukanku.

Kuna iya amfani da DivMagic ko makamantan kayan aikin don haɓaka saurin ƙaura.

Kayan aikin haɓaka gidan yanar gizo kamar DivMagic suna ba ku damar kwafi kowane nau'in kowane ƙira da kowane salo daga kowane gidan yanar gizo tare da dannawa ɗaya.

Misali Mai Sauƙi: Gina Bangaren Katin Amsa

Anan ga misalin yadda zaku iya gina sashin katin amsawa ta amfani da Tailwind CSS. Wannan bangaren zai ƙunshi hoto, take, da kwatance.

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

Gina Fom tare da Tailwind CSS

Ƙirƙirar tsari tare da Tailwind CSS yana da sauƙi kuma mai fahimta. Ga hanyar tuntuɓar mai sauƙi:

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

Keɓance Tailwind CSS

Tailwind CSS yana ba ku damar tsara tsoffin tsarin sa, yana daidaita azuzuwan masu amfani da bukatun ku. A ƙasa akwai misalin yadda ake tsara palette mai launi.

Waɗannan misalan suna nuna sassauci da sauƙi na Tailwind CSS, suna nuna yadda za su iya taimaka muku ƙirƙirar abubuwan haɗin yanar gizo na zamani, masu amsawa cikin inganci da inganci.

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

Zan buƙaci kowane fayil na CSS?

Fayil guda ɗaya da kuke buƙata tare da Tailwind CSS shine fayil ɗin tailwind.config.js.

Wannan fayil ɗin zai riƙe saitunan daidaitawar ku. Ba za ku rubuta css ba ko samun wani fayil na css. Wannan fayil ɗin daidaitawa shine kawai wanda kuke buƙata.

Menene mafi kyawun ayyuka don Tailwind CSS?

Don cikakkun bayanai kan mafi kyawun ayyuka na Tailwind CSS, da fatan za a duba sauran labarinmu Mafi kyawun Ayyuka na Tailwind CSS.

Tailwind CSS: Makomar Tsarin Yanar Gizo

Yi tunani kan yadda Tailwind CSS ke tsara makomar ƙirar gidan yanar gizo. Koyi game da tasirinsa da yuwuwar haɓakawa a cikin masana'antar ci gaban yanar gizo.