Tailwind CSS - Kubaka imbuga za kijyambere byihuse utaretse HTML yawe

Kora Ibishushanyo Bigoye byoroshye

Hamwe na Tailwind CSS, gukora ibishushanyo bigoye bihinduka umuyaga. Ihuriro ryibyiciro byingirakamaro hamwe nigishushanyo mbonera cyibikorwa bigufasha gukora igishushanyo mbonera cyoroshye, utabangamiye imikorere no kubungabunga urubuga rwawe.

Wubake ikintu icyo ari cyo cyose

Ubwiza bwa Tailwind CSS buri muburyo bwinshi. Urashobora gukora ikintu icyo aricyo cyose kuva kurupapuro rworoshye rwa blog kugeza kuri e-ubucuruzi bwateye imbere, byose mugihe ukoresheje amasomo amwe yingirakamaro.

Ufite imipaka gusa kubitekerezo byawe. Itandukaniro nyamukuru ryo gukoresha Vanilla CSS ni umuvuduko ushobora kubaka ibishushanyo mbonera.

Uburyo gakondo bwo gukoresha ibyiciro bya css byigenga hamwe nibice bya html nka div, div class, p urwego burigihe ni amahitamo ariko kuzamura umuvuduko uzana na Tailwind CSS byorohereza ubuzima bwawe.

Imikorere myiza ntabwo ikora

Ubusanzwe, CSS yanditswe mugushiraho uburyo bwimiterere yisi yose no kuyinonosora kubice-by-ibice. Mugihe ubu aribwo buryo buzwi, burashobora kuganisha kuri kode nini, bigoye-kubungabunga code.

Tailwind CSS irwanya iki gitekerezo, ivuga ko CSS-yambere itanga igisubizo gisukuye, kirambye.

Isomero ryibikoresho bizwi cyane kuri Tailwind CSS

daisyUI nububiko bwibitabo buzwi cyane kuri Tailwind CSS, burata ibice birenga 50 byateguwe mbere, ibyiciro 500+ byingirakamaro, hamwe nibishoboka bitagira iherezo. Iragukiza kugarura ibiziga igihe cyose uremye umushinga mushya.

Ntukongere guhimba Ikiziga Igihe cyose

Aho guta igihe cyawe hamwe nuburyo burambiwe bwo kwandika amazina yicyiciro cyamasomo kuri buri mushinga mushya, Tailwind CSS igushoboza gukoresha neza ibisobanuro, ibisobanuro byamasomo yingirakamaro.

Aya masomo arashobora gukoreshwa kandi agakorana neza na casade ya CSS, iguha umusingi ukomeye kumishinga yawe yose.

Tailwind CSS - Ikoreshwa rya mbere CSS Urwego

Nibyingenzi, Tailwind CSS ningirakamaro-yambere ya CSS. Ibi bivuze ko itanga urwego rwo hasi, rushobora gukoreshwa ibyiciro byingirakamaro ushobora gukoresha kugirango wubake igishushanyo icyo aricyo cyose, muri HTML yawe. Ntakindi dosiye ya CSS itagira iherezo, gusa kode yoroshye kandi itangiza.

Koresha Amazina y'Icyiciro cya Semantike

Amazina yicyiciro cya semantike atezimbere gusoma kode yawe, byoroshye kumva icyo icyiciro runaka gikora nukureba izina ryacyo. Nibimwe mubintu byinshi Tailwind CSS yakoresheje kugirango itezimbere uburambe bwabateza imbere.

CSS Yera. Imikorere Agnostic. Akorera Ahantu hose

Tailwind CSS ntabwo iguhuza kumurongo runaka. Nibyiza gusa CSS, urashobora rero kuyikoresha nurwego urwo arirwo rwose, cyangwa ntanurwego rwose. Ikora ahantu hose CSS ikorera.

Inyungu za Tailwind CSS

Inyungu zo gukoresha Tailwind CSS zirimo kongera umusaruro, kugabanya ingano ya dosiye ya CSS, hamwe nubunararibonye bwabatezimbere bitewe nuburyo bukoreshwa bwa mbere. Ikigeretse kuri ibyo, uburyo-bwonyine (JIT) butanga ibihe byumurabyo byihuse, bikomeza kwihuta mubikorwa byiterambere.

Ibiciro bya CSS

Tailwind CSS ni umushinga ufungura isoko, bivuze ko ari ubuntu rwose gukoresha. Igiciro kiza mugihe ushaka kubona ibintu byingenzi nka UI ibice na templates, bitangwa binyuze muri Tailwind UI.

Nibitekerezo kandi byoroshye icyarimwe

Tailwind CSS itanga igitekerezo gikomeye cyukuntu wakora CSS yawe, nyamara biroroshye guhinduka kugirango wemererwe. Iyi mpirimbanyi igushoboza kwibanda kubyingenzi - kubaka UI nziza.

Ibiranga kijyambere

Tailwind CSS ikubiyemo ibintu bigezweho nka Flexbox, Grid, hamwe nibintu byihariye, bigatuma ihitamo neza mugutezimbere porogaramu zigezweho.

Ibisabwa kugirango ukoreshe Tailwind CSS

Mbere yuko utangira gukoresha Tailwind CSS, ukeneye gusobanukirwa shingiro rya HTML na CSS.

Igihe cyo gukoresha Tailwind CSS

Tailwind CSS ikwiranye nubwoko bwose bwimishinga y'urubuga, nini cyangwa nto. Niba urambiwe guhangana na CSS ugashaka igisubizo cyiza, cyorohereza iterambere, noneho Tailwind CSS ni iyanyu.

Ntabwo ari mubice bigize ibice?

Niba utari umufana wibigize nka React cyangwa Vue, nta mpungenge. Tailwind CSS ni framework-agnostic kandi irashobora gukoreshwa hamwe na HTML nziza na JavaScript.

Ibisa nibitandukaniro hagati yTailwind CSS nizindi mikorere ya CSS

Mugihe ubundi buryo nka Bootstrap na Foundation butanga ibice byateguwe mbere, Tailwind CSS iguha ibikoresho byo kubaka ibishushanyo mbonera rwose utaretse HTML yawe. Ariko, hamwe no guhuza amasomero yibigize nka daisyUI, ubu urashobora kwishimira ibyiza byisi byombi.

Uburyo bwijimye

Kimwe mu bintu biheruka kuranga Tailwind CSS na daisyUI nuburyo bwijimye, bugushoboza gukora imbuga-zijimye-imbuga zimbaraga.

Urugero rwa Flexbox

Tailwind CSS ihuza neza hamwe na CSS igezweho nka Flexbox. Kurugero, urashobora gukora imiterere isubiza ukoresheje amasomo nka flex, gutsindishiriza- hagati, ibintu-hagati, nibindi.

Hamwe nuruvange rwa Just-in-Time, urashobora kugerageza ibintu bitandukanye byingirakamaro mubyiciro byoroshye. Niba icyiciro kimwe cyingirakamaro kidakora, hindura gusa kugirango uhindure ibintu byawe.

Urugero rwa Flexbox Urugero

Ukoresheje Tailwind CSS, biroroshye gukora imiterere igoye nkumurongo wo gusubiza neza. Dore urugero:

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

Ibice byateguwe

Niba wahisemo gukoresha codewind css code mumushinga wawe, uzashobora kubona ibice byinshi byambere kumurongo. Urashobora gukoporora kimwe muribi hanyuma ugahitamo kurubuga rwawe bwite.

Nigute wahindura CSS kuri Tailwind CSS

Kubasha guhindura CSS mubyiciro bya Tailwind CSS nikintu benshi mubateza imbere bakeneye. Hano hari imbuga nyinshi kuri enterineti zubatswe mbere yuko Tailwind CSS ibaho. Ipaji zurubuga zikoresha css hamwe nurupapuro rwimikorere hamwe nabashinzwe iterambere ryurubuga bashaka kwimura izi page kuri Tailwind CSS.

DivMagic nigikoresho cyiterambere cyurubuga rwubatswe kubateza imbere urubuga nabategura software. Yemerera uburyo ubwo aribwo bwose gukopororwa kuva vanilla css kuri Tailwind CSS. Ukanze rimwe, urashobora guhindura ibice byose kuri enterineti kuri Tailwind CSS hanyuma ugakoresha Tailwind mumushinga wawe hanyuma ugahindura uburyo uko ubishaka.

Wibire cyane muri Tailwind CSS Filozofiya

Filozofiya iri inyuma ya Tailwind CSS nukwibanda kubikorwa byingirakamaro. Ibi bivuze aho kugirango usobanure ibyiciro bigize ibice, Tailwind CSS itanga ibyiciro byo murwego rwohejuru byingirakamaro bigushoboza kubaka ibishushanyo bidasanzwe utaretse HTML yawe.

Kuki Kwimura kure ya CSS gakondo?

Gakondo CSS irashobora gutera gukoresha birenze urugero, dosiye zuzuye, hamwe na 'div soup'. Muguhindura ibikorwa-byambere bya CSS nkibikorwa bya Tailwind CSS, urashobora kugabanya ibyo bibazo, bikavamo codebase isukuye, yoroshye.

Inararibonye Imbaraga Zibyiciro Byingirakamaro

Ibyiciro byingirakamaro bigufasha kwirinda gusubiramo uburyo bumwe muburyo bwose. Ni ihame rya "Ntukisubiremo" (KUMUKA). Aya masomo azigama umwanya nimbaraga zikomeye kandi biganisha kuri codebase ikomeza cyane.

Gutohoza Amabwiriza ya Tailwind CSS

Tailwind CSS itangiza amabwiriza make ashobora gukoreshwa mumpapuro zawe. Harimo @gusaba, @variants, na @kugaragaza. Gusobanukirwa no gukoresha aya mabwiriza birashobora kuzamura cyane uburambe bwa Tailwind CSS. Ibi birashobora gushyirwa muri dosiye ya Tailwind Config CSS. Urashobora kwandika amasomo ya css ukoresheje ubu buryo.

Kwagura Tailwind CSS hamwe na plugins

Tailwind CSS irashobora kwagurwa hamwe na plugins, ukongera imikorere mishya cyangwa gutunganya iyari isanzwe. Wige uburyo bwo gukoresha amacomeka kugirango wongere imikorere nuburanga bwimishinga yawe.

Shyiramo Tailwind CSS mubikorwa byawe

Kwinjiza Tailwind CSS mubikorwa byiterambere byawe biroroshye, waba ukoresha ibikoresho byubaka nka Webpack cyangwa Parcel, cyangwa ukorana nurwego nka Next.js cyangwa Gatsby.

Kongera ubushobozi hamwe na Tailwind CSS

Tailwind CSS ishishikarizwa gushushanya kuboneka ushizemo ibiranga ARIA mubyiciro byayo. Kora interineti igaragara kandi wongere uburambe bwabakoresha kuri buri wese.

Koresha imbaraga za Flexbox na Grid hamwe na Tailwind CSS

Koresha uburyo bugezweho bwa CSS imiterere nka Flexbox na Grid hamwe na Tailwind CSS. Wige uburyo amasomo yingirakamaro ashobora gukoreshwa mugucunga imiterere muburyo bworoshye kandi bwitondewe.

Nigute ushobora gukemura imishinga yawe ya CSS

Tailwind CSS itanga ibikoresho nubuhanga butandukanye bwo gukemura no gukemura ibibazo byuburyo bworoshye. Sobanukirwa n'ibikoresho kandi uzamure ubuhanga bwawe bwo gukemura.

Kora Urubuga rwamabara hamwe na Tailwind CSS

Tailwind CSS ije ifite palette yagutse yamabara yihariye. Wige gukoresha no gutunganya amabara kugirango ukore ibishushanyo mbonera kandi bigaragara neza.

Teza imbere byihuse hamwe na Tailwind CSS 'JIT Mode

Winjire cyane muburyo bwa Tailwind CSS muburyo-bwigihe. Sobanukirwa uko ikora nuburyo ishobora kwihuta cyane iterambere ryawe no kubaka ibihe.

Kuva kuri Zeru kugeza Intwari: Master Tailwind CSS

Tangira urugendo rwo kumenya Tailwind CSS. Kuva mugushiraho ibidukikije kugeza gushakisha ingingo zateye imbere, ubu buyobozi bwuzuye wabigezeho.

Hindura Tailwind CSS kubyo ukeneye

Imwe mumbaraga zikomeye za Tailwind CSS nuburyo bworoshye. Wige uburyo bwo gutunganya Tailwind kugirango uhuze umushinga wawe ukeneye.

Kubona Amaboko hamwe na Tailwind CSS

Jya wiga amaboko ukoresheje urukurikirane rw'ingero zifatika. Shakisha uburyo wubaka ibice bitandukanye byurubuga ukoresheje Tailwind CSS na DaisyUI.

Kwimuka Mubindi bikoresho bya CSS kuri Tailwind CSS

Urebye guhinduranya Tailwind CSS? Sobanukirwa itandukaniro ryingenzi hagati ya Tailwind nizindi nzego, kandi wige ingamba zifatika zo kwimura imishinga yawe.

Urashobora gukoresha DivMagic cyangwa ibikoresho bisa kugirango wongere umuvuduko wawe wimuka.

Ibikoresho byiterambere ryurubuga nka DivMagic bigufasha kwigana ikintu icyo aricyo cyose igishushanyo nuburyo ubwo aribwo bwose kuva kurubuga urwo arirwo rwose.

Urugero rworoshye: Kubaka Ikarita Yishubije

Dore urugero rwukuntu ushobora kubaka ikarita yitabiriwe ukoresheje Tailwind CSS. Iki gice kizaba kirimo ishusho, umutwe, nibisobanuro.

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

Kubaka Ifishi hamwe na Tailwind CSS

Gukora ifishi hamwe na Tailwind CSS biroroshye kandi byihuse. Dore urupapuro rworoshye rwo guhuza:

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

Guhitamo Tailwind CSS

Tailwind CSS igushoboza guhitamo iboneza ryayo risanzwe, uhuza ibyiciro byingirakamaro kubyo ukeneye. Munsi ya ther eis urugero rwuburyo bwo guhitamo ibara palette.

Izi ngero zerekana ubworoherane nubworoherane bwa Tailwind CSS, byerekana uburyo zishobora kugufasha gukora ibice bigezweho, byitabira kurubuga neza kandi neza.

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

Nzakenera dosiye iyo ari yo yose ya CSS?

Idosiye yonyine ukeneye hamwe na Tailwind CSS ni dosiye ya tailwind.config.js.

Iyo dosiye izaba ifite igenamiterere ryawe. Ntuzandika css cyangwa ufite izindi dosiye zose za css. Iyi dosiye iboneza niyo yonyine uzakenera.

Ni ubuhe buryo bwiza bwakoreshwa kuri Tailwind CSS?

Kubisobanuro birambuye kubikorwa byiza bya Tailwind CSS, nyamuneka reba izindi ngingo yacu Tailwind CSS Imyitozo myiza.

Tailwind CSS: Ejo hazaza h'urubuga

Tekereza uburyo Tailwind CSS itegura ejo hazaza h'urubuga. Wige ingaruka zayo nubushobozi bwo gukura mubikorwa byiterambere ryurubuga.