Tailwind CSS - Tóg láithreáin ghréasáin nua-aimseartha go tapa gan do HTML a fhágáil

Cruthaigh Dearthaí Coimpléascacha gan stró

Le Tailwind CSS, beidh cruthú dearaí casta ina Breeze. Ligeann an meascán de ranganna fóntais agus fóntais deartha sofhreagracha duit leagan amach casta a dhearadh gan stró, gan cur isteach ar fheidhmíocht agus inchothaitheacht do shuíomh Gréasáin.

Tóg rud ar bith

Tá áilleacht Tailwind CSS ina solúbthacht. Is féidir leat rud ar bith a chruthú ó leathanach blag simplí go hardán ríomhthráchtála chun cinn, agus na ranganna fóntais iomasach céanna á n-úsáid agat.

Níl tú teoranta ach ag do shamhlaíocht. Is é an príomh-difríocht ó Vanilla CSS a úsáid ná an luas inar féidir leat dearaí saincheaptha a thógáil.

Is rogha i gcónaí é an cur chuige traidisiúnta maidir le ranganna saincheaptha css a úsáid le comhpháirteanna html cosúil le div, rang div, rang p ach déanann an feabhsú luais a thagann le Tailwind CSS do shaol níos éasca.

Ní oibríonn na cleachtais is fearr i ndáiríre

Go traidisiúnta, scríobhtar CSS trí shraith stíleanna domhanda a bhunú agus iad a scagadh ar bhonn comhpháirte. Cé gur modh coitianta é seo, d’fhéadfadh cód toirtiúil, deacair a chothabháil, a bheith mar thoradh air.

Tugann Tailwind CSS dúshlán don nóisean seo, ag áitiú go bhfuil réiteach níos glaine agus níos inbhuanaithe á thairiscint ag fóntais-an chéad CSS.

An leabharlann chomhpháirt is mó tóir do Tailwind CSS

Is é daisyUI an leabharlann comhpháirteanna is coitianta le haghaidh Tailwind CSS, ina bhfuil níos mó ná 50 comhpháirt réamhdheartha, 500+ rang fóntais, agus féidearthachtaí beagnach gan teorainn. Sábhálann sé tú as an roth a athchruthú gach uair a chruthaíonn tú tionscadal nua.

Ná Ath-Invent an Roth Gach Uair

In ionad do chuid ama a chur amú leis an bpróiseas tedious a bhaineann le mórán ainmneacha ranga a scríobh do gach tionscadal nua, cuireann Tailwind CSS ar do chumas úsáid a bhaint as sraith shéimeantach de ranganna fóntais atá sainithe go maith.

Is féidir na ranganna seo a ath-inúsáidte agus oibríonn siad go comhchuí le cascáid CSS, ag soláthar bonn daingean duit do do thionscadail ar fad.

Tailwind CSS - Creat CSS Utility First

Ag a chroílár, is creat CSS fóntais-an chéad uair é Tailwind CSS. Ciallaíonn sé seo go soláthraíonn sé ranganna fóntais in-chomhdhéanta ar leibhéal íseal ar féidir leat a úsáid chun dearadh ar bith a thógáil, go díreach i do HTML. Níl níos mó comhaid CSS gan teorainn, gan ach cód simplí iomasach.

Úsáid Ainmneacha Aicmí Séimeantacha

Feabhsaíonn ainmneacha ranga shéimeantacha inléiteacht do chóid, rud a fhágann go bhfuil sé níos éasca a thuiscint cad a dhéanann rang ar leith ach breathnú ar a ainm. Tá sé seo ar cheann de na gnéithe iomadúla atá glactha ag Tailwind CSS chun taithí an fhorbróra a fheabhsú.

CSS glan. Creat Agnostic. Oibríonn i ngach áit

Ní cheanglaíonn Tailwind CSS tú le haon chreat sonrach. Níl ann ach CSS íon, ionas gur féidir leat é a úsáid le haon chreat, nó fiú gan aon chreat ar bith. Oibríonn sé i ngach áit a oibríonn CSS.

Buntáistí Tailwind CSS

I measc na buntáistí a bhaineann le Tailwind CSS a úsáid tá táirgiúlacht mhéadaithe, méid comhaid CSS laghdaithe, agus eispéireas feabhsaithe forbróra mar gheall ar an modheolaíocht fóntais-an chéad. Ina theannta sin, cuireann an modh Just-In-Time (JIT) amanna tógála tapa tintreach ar fáil, rud a chuireann dlús leis an bpróiseas forbartha.

Praghsáil CSS Tailwind

Is tionscadal foinse oscailte é Tailwind CSS, rud a chiallaíonn go bhfuil sé saor in aisce le húsáid. Tagann an costas nuair is mian leat rochtain a fháil ar ghnéithe préimhe cosúil le comhpháirteanna agus teimpléid Chomhéadain, a thairgtear trí Chomhéadain Tailwind.

Tá sé tuairim agus solúbtha ag an am céanna

Tugann Tailwind CSS tuairim láidir maidir le conas do CSS a struchtúrú, ach tá sé solúbtha go leor chun saincheapadh a cheadú. Cuireann an chothromaíocht seo ar do chumas díriú ar na rudaí is tábhachtaí - ag tógáil UIanna áille.

Gnéithe nua-aimseartha

Cuimsíonn Tailwind CSS gnéithe nua-aimseartha cosúil le Flexbox, Grid, agus airíonna saincheaptha, rud a fhágann gur rogha iontach é chun feidhmchláir ghréasáin nua-aimseartha a fhorbairt.

Réamhriachtanais chun Tailwind CSS a Úsáid

Sula dtosaíonn tú ag baint úsáide as Tailwind CSS, ní mór duit tuiscint bhunúsach ar HTML agus CSS.

Cathain a Úsáid Tailwind CSS

Tá Tailwind CSS oiriúnach do gach cineál tionscadal gréasáin, mór nó beag. Má tá tú tuirseach de bheith ag troid le CSS agus ag lorg réiteach níos éifeachtaí agus níos éasca don fhorbróir, is é Tailwind CSS duit.

Nach bhfuil i gcreat comhpháirte?

Mura bhfuil tú i do lucht leanúna de chreataí comhpháirteanna mar React nó Vue, ní bheidh aon imní ort. Is creat-agnostic é Tailwind CSS agus is féidir é a úsáid le HTML agus JavaScript íon.

Cosúlachtaí agus Difríochtaí idir Tailwind CSS agus Creataí CSS Eile

Cé go dtugann creataí eile cosúil le Bootstrap agus Fondúireacht comhpháirteanna réamhdheartha, tugann Tailwind CSS na huirlisí duit chun dearaí go hiomlán saincheaptha a thógáil gan do HTML a fhágáil. Mar sin féin, le comhtháthú leabharlanna comhpháirteanna mar daisyUI, is féidir leat taitneamh a bhaint as an dá shaol is fearr anois.

Mód Dorcha

Is é ceann de na gnéithe is déanaí de Tailwind CSS agus daisyUI an modh dorcha, a chuireann ar do chumas láithreáin ghréasáin le téamaí dorcha a chruthú gan stró.

Sampla Flexbox

Comhtháthaíonn Tailwind CSS go maith le gnéithe CSS nua-aimseartha cosúil le Flexbox. Mar shampla, is féidir leat leagan amach sofhreagrach a chruthú ag baint úsáide as ranganna mar flex, údar-lár, lárionad míreanna, agus mar sin de.

Leis an meascán de Just-in-Time, is féidir leat triail a bhaint as luachanna ranga fóntais éagsúla go héasca. Murar oibrigh rang fóntais amháin, ní gá ach é a athrú chun d’eilimint a shaincheapadh.

Sampla de Leagan Amach Bosca Flex

Ag baint úsáide as Tailwind CSS, tá sé éasca leagan amach casta a chruthú cosúil le barra nascleanúna sofhreagrach. Seo sampla:

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

Comhpháirteanna réamhdhéanta

Má shocraigh tú cód tailwind css a úsáid i do thionscadal, beidh tú in ann go leor comhpháirteanna réamhdhéanta a fháil ar líne. Is féidir leat aon cheann díobh seo a chóipeáil agus a shaincheapadh do do shuíomh Gréasáin féin.

Conas CSS a thiontú go CSS Tailwind

Ní mór d'fhorbróirí is mó a bheith in ann CSS a thiontú ina ranganna CSS Tailwind. Tá go leor suíomhanna gréasáin ar an idirlíon a tógadh sula raibh Tailwind CSS ann. Úsáideann na leathanaigh ghréasáin seo css le stílbhileog agus tá gairmithe forbartha gréasáin ag iarraidh na leathanaigh seo a aistriú go Tailwind CSS.

Is uirlis forbartha gréasáin é DivMagic a tógadh d’fhorbróirí gréasáin agus d’fhorbróirí bogearraí. Ceadaíonn sé aon stíl a chóipeáil ó css fanaile go Tailwind CSS. Le clic amháin, is féidir leat aon chomhpháirt ar an idirlíon a thiontú go Tailwind CSS agus Tailwind a úsáid i do thionscadal agus an stíl a shaincheapadh ar aon nós.

Léim go domhain isteach i bhFealsúnacht CSS Tailwind

Is í an fhealsúnacht taobh thiar de Tailwind CSS ná díriú ar áirgiúlacht. Ciallaíonn sé seo in ionad ranganna comhpháirteanna a réamhshainiú, soláthraíonn Tailwind CSS ranganna fóntais íseal-leibhéil a chuireann ar do chumas dearaí uathúla a thógáil gan do HTML a fhágáil.

Cén fáth Bogadh Amach ó CSS ​​Traidisiúnta?

D'fhéadfadh sé go n-eascródh ró-úsáid as sáruithe, comhaid bloated, agus 'anraith div' mar thoradh ar CSS traidisiúnta. Trí aistriú chuig creat CSS fóntais-an-tosaithe cosúil le Tailwind CSS, is féidir leat na saincheisteanna seo a mhaolú, agus beidh bunachar cód níos glaine agus níos sruthlínithe mar thoradh air.

Taithí a dhéanamh ar Chumhacht Ranganna Fóntas

Cuidíonn ranganna fóntais leat gan na stíleanna céanna a athrá ar fud do stílbhileoga. Is prionsabal é "Ná Déan Tú Féin" (TIRIM). Sábhálann na ranganna seo am agus iarracht shuntasach duit agus cruthaíonn siad bunachar cód an-inbhuanaithe.

Iniúchadh ar Threoracha CSS Tailwind

Tugann Tailwind CSS isteach roinnt treoracha is féidir a úsáid laistigh de do stílbhileoga. Ina measc tá @apply , @variant , agus @screen. Is féidir le do thaithí CSS Tailwind a thuiscint agus a úsáid go mór. Is féidir iad seo a chur sa chomhad CSS Tailwind Config. Is féidir leat ranganna css a scríobh ag baint úsáide as an gcur chuige seo.

Síneadh Tailwind CSS le Breiseáin

Is féidir Tailwind CSS a leathnú le forlíontáin, ag cur feidhmiúlacht nua leis nó ag oiriúnú an ceann atá ann cheana féin. Foghlaim conas forlíontáin a ghiaráil chun éifeachtúlacht agus aeistéitiúil do thionscadail ghréasáin a uasmhéadú.

Ionchorpraigh Tailwind CSS isteach i do Shreabhadh Oibre

Tá sé éasca Tailwind CSS a chomhtháthú le do shreabhadh oibre forbartha, cibé an bhfuil tú ag úsáid uirlisí tógála ar nós Webpack nó Beartán, nó ag obair le creataí mar Next.js nó Gatsby.

Feabhas a chur ar Inrochtaineacht le CSS Tailwind

Spreagann Tailwind CSS dearadh inrochtana trí raon tréithe ARIA a áireamh ina ranganna. Cruthaigh comhéadain níos inrochtana agus feabhsaigh an t-eispéireas úsáideora do gach duine.

Leas a bhaint as Cumhacht Flexbox agus Greille le CSS Tailwind

Giaráil modúil leagan amach CSS nua-aimseartha ar nós Flexbox agus Grid le Tailwind CSS. Foghlaim conas is féidir ranganna áirgiúlachta a úsáid chun leagan amach a rialú ar bhealach solúbtha sofhreagrach.

Conas Do Thionscadail CSS Tailwind a Dhífhabhtú

Soláthraíonn Tailwind CSS roinnt uirlisí agus teicnící dífhabhtaithe a éascaíonn sainaithint agus réiteach saincheisteanna stíle. Na huirlisí seo a thuiscint agus do scileanna dífhabhtaithe a fheabhsú.

Cruthaigh Gréasáin ildaite le CSS Tailwind

Tagann Tailwind CSS le pailéad leathan dathanna inoiriúnaithe. Foghlaim conas na dathanna seo a úsáid agus a shaincheapadh chun dearaí bríomhara agus tarraingteacha ó thaobh amhairc a chruthú.

Déan níos tapúla a fhorbairt le Mód JIT CSS Tailwind

Déan iniúchadh níos doimhne ar mhodh Just-In-Time CSS Tailwind. A thuiscint conas a oibríonn sé agus conas is féidir leis d'fhorbairt agus d'amanna tógála a bhrostú go suntasach.

Ó náid go Laoch: Máistir Tailwind CSS

Tabhair faoi thuras chun máistreacht a fháil ar Tailwind CSS. Ó bhunú do thimpeallachta go dtí iniúchadh a dhéanamh ar ardábhair, tá an treoir chuimsitheach seo clúdaithe agat.

Saincheap Tailwind CSS do do Riachtanais

Ceann de na láidreachtaí is mó de Tailwind CSS ná a solúbthacht. Foghlaim conas Tailwind a shaincheapadh chun freastal ar riachtanais shonracha do thionscadail.

Dul i Láimh le CSS Tailwind

Glac páirt i bhfoghlaim phraiticiúil trí shraith samplaí praiticiúla. Déan iniúchadh ar conas éagsúlacht comhpháirteanna gréasáin a thógáil ag baint úsáide as Tailwind CSS agus DaisyUI.

Aistriú ó Chreata CSS Eile go CSS Tailwind

Ag smaoineamh ar athrú go Tailwind CSS? Na príomhdhifríochtaí idir Tailwind agus creataí eile a thuiscint, agus straitéisí éifeachtacha a fhoghlaim chun do thionscadail a aistriú.

Is féidir leat DivMagic nó uirlisí comhchosúla a úsáid chun do luas imirce a mhéadú go suntasach.

Ligeann uirlisí forbartha gréasáin cosúil le DivMagic duit aon eilimint de dhearadh agus stíl ar bith a chóipeáil ó aon láithreán gréasáin le cliceáil amháin.

Sampla Simplí: Comhpháirt Cárta Sofhreagrach a Thógáil

Seo sampla de conas is féidir leat comhpháirt cárta sofhreagrach a thógáil ag baint úsáide as Tailwind CSS. Beidh íomhá, teideal agus cur síos sa chomhphá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>

Foirm a thógáil le CSS Tailwind

Tá sé simplí agus iomasach foirm a chruthú le Tailwind CSS. Seo foirm teagmhála simplí:

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

Ligeann Tailwind CSS duit a chumraíocht réamhshocraithe a shaincheapadh, ag oiriúnú na ranganna fóntais do do chuid riachtanas. Anseo thíos tá sampla de conas an pailéad dathanna a shaincheapadh.

Léiríonn na samplaí seo solúbthacht agus simplíocht Tailwind CSS, rud a thaispeánann conas is féidir leo cabhrú leat comhpháirteanna gréasáin sofhreagracha nua-aimseartha a chruthú go héifeachtúil agus go héifeachtach.

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

An mbeidh aon chomhad CSS de dhíth orm?

Is é an comhad tailwind.config.js an t-aon chomhad atá uait le Tailwind CSS.

Coinneoidh an comhad sin do shocruithe cumraíochta. Ní bheidh CSS á scríobh agat ná ní bheidh aon chomhad css eile agat. Is é an comhad cumraíochta seo an t-aon cheann a bheidh uait.

Cad iad na cleachtais is fearr le haghaidh Tailwind CSS?

Le haghaidh míniú mionsonraithe ar dhea-chleachtais Tailwind CSS, féach ar ár n-alt eile Cleachtais is Fearr Tailwind CSS.

Tailwind CSS: Todhchaí an Dearaidh Ghréasáin

Déan machnamh ar an gcaoi a bhfuil Tailwind CSS ag múnlú todhchaí dearadh gréasáin. Foghlaim faoina thionchar agus a acmhainneacht fáis sa tionscal forbartha gréasáin.