Tailwind CSS - Tog làraich-lìn ùr-nodha gu sgiobalta gun a bhith a’ fàgail do HTML

Cruthaich dealbhadh iom-fhillte gu furasta

Le Tailwind CSS, bidh cruthachadh dhealbhaidhean iom-fhillte gu bhith na ghaoith. Leigidh an cothlamadh de chlasaichean goireis agus goireasan dealbhaidh freagairteach dhut dealbhadh toinnte a dhealbhadh gu furasta, gun a bhith a’ toirt buaidh air coileanadh agus seasmhachd an làrach-lìn agad.

Tog rud sam bith

Tha bòidhchead Tailwind CSS na laighe anns an sùbailteachd aige. Faodaidh tu rud sam bith a chruthachadh bho dhuilleag blog sìmplidh gu àrd-ùrlar e-malairt adhartach, fhad ‘s a tha thu a’ cleachdadh na h-aon chlasaichean goireas intuitive.

Tha thu dìreach cuingealaichte le do mhac-meanmna. Is e am prìomh eadar-dhealachadh bho bhith a’ cleachdadh Vanilla CSS an astar anns an urrainn dhut dealbhadh àbhaisteach a thogail.

Tha an dòigh thraidiseanta airson a bhith a’ cleachdadh chlasaichean css àbhaisteach le co-phàirtean html leithid div, clas div, clas p an-còmhnaidh na roghainn ach tha an leasachadh astair a thig an cois Tailwind CSS a’ dèanamh do bheatha nas fhasa.

Gu dearbh, chan eil na cleachdaidhean as fheàrr ag obair

Gu traidiseanta, tha CSS air a sgrìobhadh le bhith a’ stèidheachadh seata de stoidhlichean cruinneil agus gan ùrachadh a rèir co-phàirt. Ged is e dòigh mòr-chòrdte a tha seo, faodaidh e leantainn gu còd tomadach, duilich a chumail suas.

Tha Tailwind CSS a’ toirt dùbhlan don bheachd seo, ag argamaid gu bheil CSS goireasach-an-toiseach a’ tabhann fuasgladh nas glaine agus nas seasmhaiche.

An leabharlann co-phàirteach as mòr-chòrdte airson Tailwind CSS

Is e daisyUI an leabharlann co-phàirteach as mòr-chòrdte airson Tailwind CSS, anns a bheil còrr air 50 co-phàirtean ro-dhealbhaichte, 500+ clasaichean goireis, agus cothroman cha mhòr gun chrìoch. Sàbhalaidh e thu bho bhith ag ath-thòiseachadh a’ chuibhle a h-uile uair a chruthaicheas tu pròiseact ùr.

Na ath-chruthaich an cuibhle a h-uile turas

An àite a bhith a’ caitheamh do chuid ùine leis a’ phròiseas duilich a bhith a’ sgrìobhadh dhusanan de dh’ ainmean clas airson gach pròiseact ùr, tha Tailwind CSS a’ toirt cothrom dhut seata semantach de chlasaichean goireasach a chleachdadh.

Faodar na clasaichean sin ath-chleachdadh agus bidh iad ag obair gu co-chòrdail le cascade CSS, a’ toirt dhut bunait làidir airson na pròiseactan agad gu lèir.

Tailwind CSS - Frèam CSS Utility First

Aig a chridhe, tha Tailwind CSS na fhrèam CSS feumail-an-toiseach. Tha seo a’ ciallachadh gu bheil e a’ toirt seachad clasaichean goireasach ìre ìosal as urrainn dhut a chleachdadh gus dealbhadh sam bith a thogail, gu dìreach anns an HTML agad. Chan eil faidhlichean CSS gun chrìoch ann, dìreach còd sìmplidh agus intuitive.

Cleachd Ainmean Clas Semantic

Bidh ainmean clas semantach ag adhartachadh leughadh a’ chòd agad, ga dhèanamh nas fhasa tuigsinn dè a bhios clas sònraichte a’ dèanamh dìreach le bhith a’ coimhead air an ainm. Is e seo aon de na mòran fheartan a tha Tailwind CSS air gabhail ris gus eòlas an leasaiche a leasachadh.

CSS glan. Frèam agnostic. Ag obair anns a h-uile àite

Cha bhith Tailwind CSS gad cheangal ri frèam sònraichte. Is e dìreach CSS fìor-ghlan a th’ ann, agus mar sin faodaidh tu a chleachdadh le frèam sam bith, no eadhon gun fhrèam sam bith. Bidh e ag obair anns a h-uile àite a bhios CSS ag obair.

Buannachdan Tailwind CSS

Tha na buannachdan bho bhith a’ cleachdadh Tailwind CSS a’ toirt a-steach barrachd cinneasachd, meud faidhle CSS nas lugha, agus eòlas leasaiche leasaichte mar thoradh air a’ mhodh-obrach utility-first. A bharrachd air an sin, tha am modh Just-In-Time (JIT) a’ toirt seachad amannan togail luath-dealanach, a’ luathachadh do phròiseas leasachaidh.

Prìsean Tailwind CSS

Tha Tailwind CSS na phròiseact le còd fosgailte, a tha a’ ciallachadh gu bheil e gu tur an-asgaidh a chleachdadh. Thig a’ chosgais nuair a tha thu airson faighinn gu prìomh fheartan leithid co-phàirtean UI agus teamplaidean, a tha air an tabhann tro Tailwind UI.

Tha e smaoineachail agus sùbailte aig an aon àm

Tha Tailwind CSS a’ toirt seachad beachd làidir air mar as urrainn dhut do CSS a structaradh, ach tha e sùbailte gu leòr airson gnàthachadh a cheadachadh. Leigidh an cothromachadh seo leat fòcas a chuir air na rudan as cudromaiche - togail UI brèagha.

Feartan ùr-nodha

Tha Tailwind CSS a’ toirt a-steach feartan ùr-nodha leithid Flexbox, Grid, agus togalaichean àbhaisteach, ga fhàgail na dheagh roghainn airson a bhith a’ leasachadh thagraidhean lìn ùr-nodha.

Ro-ghoireasan airson Tailwind CSS a chleachdadh

Mus tòisich thu a’ cleachdadh Tailwind CSS, feumaidh tu tuigse bhunasach air HTML agus CSS.

Cuin a chleachdas tu Tailwind CSS

Tha Tailwind CSS freagarrach airson gach seòrsa pròiseact lìn, mòr no beag. Ma tha thu sgìth de bhith a’ carachd le CSS agus a’ coimhead airson fuasgladh nas èifeachdaiche agus nas freagarraiche don leasaiche, tha Tailwind CSS dhutsa.

Gun a bhith ann am frèaman co-phàirteach?

Mura h-eil thu dèidheil air frèaman co-phàirteach mar React no Vue, na gabh dragh. Tha Tailwind CSS na fhrèam-agnostic agus faodar a chleachdadh le HTML agus JavaScript fìor.

Coltas agus eadar-dhealachaidhean eadar Tailwind CSS agus frèaman CSS eile

Fhad ‘s a tha frèaman eile leithid Bootstrap agus Foundation a’ tabhann co-phàirtean ro-dhealbhaichte, bheir Tailwind CSS na h-innealan dhut gus dealbhadh gu tur àbhaisteach a thogail gun a bhith a ’fàgail do HTML. Ach, le aonachadh leabharlannan co-phàirteach mar daisyUI, faodaidh tu a-nis tlachd fhaighinn bhon dà shaoghal as fheàrr.

Modh Dorcha

Is e aon de na feartan as ùire de Tailwind CSS agus daisyUI am modh dorcha, a leigeas leat làraich-lìn le cuspairean dorcha a chruthachadh gun oidhirp.

Eisimpleir Flexbox

Tha Tailwind CSS a’ fighe a-steach gu math le feartan CSS an latha an-diugh leithid Flexbox. Mar eisimpleir, faodaidh tu cruth freagairteach a chruthachadh a’ cleachdadh chlasaichean mar flex, fìreanachadh-ionad, ionad nithean, agus mar sin air adhart.

Leis a’ chothlamadh de Just-in-Time, faodaidh tu diofar luachan clas goireasach fheuchainn gu furasta. Mura obraich aon chlas goireis, dìreach atharraich e gus an eileamaid agad a ghnàthachadh.

Eisimpleir de chruth Flexbox

A’ cleachdadh Tailwind CSS, tha e furasta dealbhadh iom-fhillte a chruthachadh leithid bàr seòlaidh freagairteach. Seo eisimpleir:

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

Co-phàirtean deiseil

Ma cho-dhùnas tu còd tailwind css a chleachdadh sa phròiseact agad, bidh e comasach dhut mòran de phàirtean ro-mhìnichte a lorg air-loidhne. Faodaidh tu gin dhiubh sin a chopaigeadh agus a ghnàthachadh airson an làrach-lìn agad fhèin.

Mar as urrainn dhut CSS a thionndadh gu CSS Tailwind

Tha a bhith comasach air CSS a thionndadh gu clasaichean CSS Tailwind na rud a dh ’fheumas a’ mhòr-chuid de luchd-leasachaidh. Tha mòran làraich-lìn air an eadar-lìn a chaidh a thogail mus robh Tailwind CSS ann. Bidh na duilleagan lìn seo a’ cleachdadh css le duilleag stoidhle agus tha proifeiseantaich leasachaidh lìn ag iarraidh na duilleagan sin a ghluasad gu Tailwind CSS.

Tha DivMagic na inneal leasachaidh lìn a chaidh a thogail airson leasaiche lìn agus luchd-leasachaidh bathar-bog. Leigidh e le stoidhle sam bith a bhith air a chopaigeadh bho css vanilla gu Tailwind CSS. Le aon bhriogadh, faodaidh tu pàirt sam bith air an eadar-lìn a thionndadh gu Tailwind CSS agus Tailwind a chleachdadh sa phròiseact agad agus an stoidhle a ghnàthachadh mar a tha thu ag iarraidh.

Dàibheadh ​​​​gu domhainn a-steach do fheallsanachd CSS Tailwind

Is e an fheallsanachd air cùl Tailwind CSS fòcas a chuir air goireasachd. Tha seo a’ ciallachadh an àite a bhith a’ ro-mhìneachadh chlasaichean co-phàirteach, tha Tailwind CSS a’ toirt seachad clasaichean goireis aig ìre ìosal a leigeas leat dealbhaidhean sònraichte a thogail gun a bhith a’ fàgail do HTML.

Carson a ghluaiseas tu air falbh bho CSS traidiseanta?

Dh’ fhaodadh CSS traidiseanta cus feum a dhèanamh de thar-chuiridhean, faidhlichean bloated, agus ‘div brot’. Le bhith a’ gluasad gu frèam CSS goireasach mar Tailwind CSS, faodaidh tu na cùisean sin a lughdachadh, a’ leantainn gu stòr còd nas glaine agus nas sìmplidhe.

Dèan eòlas air Clasaichean Cumhachd Goireas

Cuidichidh clasaichean goireis thu gus nach bi thu ag ath-aithris na h-aon stoidhlichean tro na duilleagan stoidhle agad. Tha e na phrionnsapal de “Na dèan ath-aithris ort fhèin” (DRY). Sàbhalaidh na clasaichean sin tòrr ùine is oidhirp dhut agus leanaidh iad gu stòr còd a tha air leth cumail suas.

A’ sgrùdadh stiùiridhean CSS Tailwind

Tha Tailwind CSS a’ toirt a-steach beagan stiùiridhean a ghabhas cleachdadh anns na duilleagan stoidhle agad. Nam measg tha @apply , @variants , agus @screen. Faodaidh tuigse agus cleachdadh nan stiùiridhean sin cur gu mòr ris an eòlas CSS Tailwind agad. Faodar iad sin a chuir ann am faidhle CSS Tailwind Config. Faodaidh tu clasaichean css a sgrìobhadh leis an dòigh-obrach seo.

Leudaich Tailwind CSS le plugins

Faodar Tailwind CSS a leudachadh le plugins, cuir feartan ùra ris no gnàthachadh an tè a th’ ann. Ionnsaich mar a chleachdas tu plugins gus èifeachdas agus bòidhchead do phròiseactan lìn a mheudachadh.

Cuir a-steach Tailwind CSS a-steach don t-sruth-obrach agad

Tha e furasta a bhith ag amalachadh Tailwind CSS a-steach don t-sruth-obrach leasachaidh agad, ge bith a bheil thu a’ cleachdadh innealan togail mar Webpack no Parcel, no ag obair le frèaman mar Next.js no Gatsby.

Meudaich ruigsinneachd le CSS Tailwind

Bidh Tailwind CSS a’ brosnachadh dealbhadh ruigsinneach le bhith a’ toirt a-steach raon de bhuadhan ARIA anns na clasaichean aige. Cruthaich eadar-aghaidh nas ruigsinneach agus àrdaich eòlas neach-cleachdaidh airson a h-uile duine.

Cleachd cumhachd Flexbox agus Grid le CSS Tailwind

Cleachd modalan cruth CSS ùr-nodha leithid Flexbox agus Grid le Tailwind CSS. Ionnsaich mar a ghabhas clasaichean goireis a chleachdadh gus smachd a chumail air cruth ann an dòigh sùbailte agus freagairteach.

Mar a nì thu dì-bhugachadh air na pròiseactan CSS Tailwind agad

Tha Tailwind CSS a’ toirt seachad grunn innealan deasbaid agus dòighean-obrach a nì e nas fhasa cùisean stoidhle aithneachadh agus fhuasgladh. Tuig na h-innealan sin agus àrdaich na sgilean deasbaid agad.

Cruthaich lìon dathach le CSS Tailwind

Tha Tailwind CSS a’ tighinn le paileas farsaing de dhhathan gnàthaichte. Ionnsaich mar a chleachdas tu agus a ghnàthachadh na dathan sin gus dealbhadh beòthail agus tarraingeach a chruthachadh.

Leasaich nas luaithe le modh JIT Tailwind CSS

Dèan sgrùdadh nas doimhne air modh Just-In-Time CSS Tailwind. Tuig mar a tha e ag obair agus mar as urrainn dha do leasachadh agus amannan togail a luathachadh gu mòr.

Bho Zero gu Gaisgeach: Master Tailwind CSS

Tòisich air turas gu bhith a’ maighstireachd Tailwind CSS. Bho bhith a’ stèidheachadh na h-àrainneachd agad gu bhith a’ sgrùdadh chuspairean adhartach, tha an stiùireadh farsaing seo air do chòmhdach.

Gnàthaich Tailwind CSS a rèir na feumalachdan agad

Is e aon de na neartan as motha aig Tailwind CSS an sùbailteachd aige. Ionnsaich mar a nì thu Tailwind a ghnàthachadh a rèir feumalachdan sònraichte a’ phròiseict agad.

A’ faighinn làmh ri làimh le CSS Tailwind

Gabh an sàs ann an ionnsachadh làimhseachail tro shreath de eisimpleirean practaigeach. Rannsaich mar a thogas tu measgachadh de cho-phàirtean lìn a’ cleachdadh Tailwind CSS agus DaisyUI.

A’ gluasad bho fhrèamaichean CSS eile gu CSS Tailwind

A’ beachdachadh air atharrachadh gu Tailwind CSS? Tuig na prìomh eadar-dhealachaidhean eadar Tailwind agus frèaman eile, agus ionnsaich ro-innleachdan èifeachdach airson do phròiseactan a ghluasad.

Faodaidh tu DivMagic no innealan coltach ris a chleachdadh gus an astar imrich agad àrdachadh gu mòr.

Leigidh innealan leasachaidh lìn mar DivMagic leat eileamaid sam bith de dhealbhadh is stoidhle sam bith a chopaigeadh bho làrach-lìn sam bith le aon bhriogadh.

Eisimpleir shìmplidh: a 'togail co-phàirt cairt freagairteach

Seo eisimpleir de mar as urrainn dhut co-phàirt cairt freagairteach a thogail a’ cleachdadh Tailwind CSS. Bidh ìomhaigh, tiotal, agus tuairisgeul anns a’ phàirt seo.

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

A 'togail foirm le CSS Tailwind

Tha cruthachadh foirm le Tailwind CSS sìmplidh agus intuitive. Seo foirm conaltraidh sìmplidh:

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

Dèan gnàthachadh air Tailwind CSS

Leigidh Tailwind CSS leat an rèiteachadh bunaiteach aige a ghnàthachadh, a’ tàillearachd nan clasaichean goireis a rèir na feumalachdan agad. Gu h-ìosal tha eisimpleir de mar as urrainn dhut am paileas dath a ghnàthachadh.

Tha na h-eisimpleirean sin a’ taisbeanadh sùbailteachd agus sìmplidheachd Tailwind CSS, a’ sealltainn mar as urrainn dhaibh do chuideachadh le bhith a’ cruthachadh phàirtean lìn ùr-nodha, freagairteach gu h-èifeachdach agus gu h-èifeachdach.

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

Am feum mi faidhle CSS sam bith?

'S e an aon fhaidhle a dh'fheumas tu le Tailwind CSS am faidhle tailwind.config.js.

Cumaidh am faidhle sin na roghainnean rèiteachaidh agad. Cha bhith thu a’ sgrìobhadh css no faidhle css sam bith eile. Is e am faidhle rèiteachaidh seo an aon fhear a dh’ fheumas tu.

Dè na cleachdaidhean as fheàrr airson Tailwind CSS?

Airson mìneachadh mionaideach air cleachdaidhean as fheàrr Tailwind CSS, faic an artaigil eile againn Cleachdaidhean as Fheàrr Tailwind CSS.

Tailwind CSS: Àm ri teachd dealbhadh lìn

Smaoinich air mar a tha Tailwind CSS a’ toirt cumadh air dealbhadh lìn san àm ri teachd. Ionnsaich mu a bhuaidh agus a chomas airson fàs ann an gnìomhachas leasachadh lìn.