Tailwind CSS - Adeiladu gwefannau modern yn gyflym heb adael eich HTML

Creu Dyluniadau Cymhleth yn Hawdd

Gyda Tailwind CSS, mae creu dyluniadau cymhleth yn dod yn awel. Mae'r cyfuniad o ddosbarthiadau cyfleustodau a chyfleustodau dylunio Reactol yn caniatáu ichi ddylunio cynlluniau cymhleth yn rhwydd, heb gyfaddawdu ar berfformiad a chynaladwyedd eich gwefan.

Adeiladu unrhyw beth

Mae harddwch Tailwind CSS yn gorwedd yn ei amlochredd. Gallwch greu unrhyw beth o dudalen blog syml i blatfform e-fasnach uwch, i gyd wrth ddefnyddio'r un dosbarthiadau cyfleustodau greddfol.

Dim ond eich dychymyg sy'n cyfyngu arnoch chi. Y prif wahaniaeth o ddefnyddio Vanilla CSS yw'r cyflymder y gallwch chi adeiladu dyluniadau personol.

Mae'r dull traddodiadol o ddefnyddio dosbarthiadau css arferol gyda chydrannau html fel div, dosbarth div, dosbarth p bob amser yn opsiwn ond mae'r gwelliant cyflymder a ddaw gyda Tailwind CSS yn gwneud eich bywyd yn haws.

Nid yw arferion gorau yn gweithio mewn gwirionedd

Yn draddodiadol, ysgrifennir CSS trwy sefydlu set o arddulliau byd-eang a'u mireinio fesul cydran. Er bod hwn yn ddull poblogaidd, gall arwain at god swmpus, anodd ei gynnal.

Mae Tailwind CSS yn herio'r syniad hwn, gan ddadlau bod CSS cyfleustodau-gyntaf yn cynnig datrysiad glanach, mwy cynaliadwy.

Y llyfrgell gydrannau fwyaf poblogaidd ar gyfer Tailwind CSS

daisyUI yw'r llyfrgell gydrannau fwyaf poblogaidd ar gyfer Tailwind CSS, gyda dros 50 o gydrannau wedi'u cynllunio ymlaen llaw, 500+ o ddosbarthiadau cyfleustodau, a phosibiliadau bron yn ddiddiwedd. Mae'n eich arbed rhag ailddyfeisio'r olwyn bob tro y byddwch chi'n creu prosiect newydd.

Peidiwch ag Ail-ddyfeisio'r Olwyn Bob Tro

Yn lle gwastraffu'ch amser gyda'r broses ddiflas o ysgrifennu dwsinau o enwau dosbarth ar gyfer pob prosiect newydd, mae Tailwind CSS yn eich galluogi i ddefnyddio set semantig o ddosbarthiadau cyfleustodau wedi'u diffinio'n dda.

Gellir ailddefnyddio'r dosbarthiadau hyn ac maent yn gweithio'n gytûn â rhaeadr CSS, gan roi sylfaen gadarn i chi ar gyfer eich holl brosiectau.

Tailwind CSS - Fframwaith CSS Utility First

Yn greiddiol iddo, mae Tailwind CSS yn fframwaith CSS cyfleustodau-gyntaf. Mae hyn yn golygu ei fod yn darparu dosbarthiadau cyfleustodau lefel isel, cyfansawdd y gallwch eu defnyddio i adeiladu unrhyw ddyluniad, yn uniongyrchol yn eich HTML. Dim mwy o ffeiliau CSS diddiwedd, dim ond cod syml a greddfol.

Defnyddiwch Enwau Dosbarthiadau Semantig

Mae enwau dosbarthiadau semantig yn gwella darllenadwyedd eich cod, gan ei gwneud hi'n haws deall beth mae dosbarth penodol yn ei wneud dim ond trwy edrych ar ei enw. Dyma un o'r nifer o nodweddion y mae Tailwind CSS wedi'u mabwysiadu i wella profiad y datblygwr.

CSS pur. Agnostig Fframwaith. Yn gweithio ym mhobman

Nid yw Tailwind CSS yn eich rhwymo i unrhyw fframwaith penodol. CSS pur ydyw, felly gallwch ei ddefnyddio gydag unrhyw fframwaith, neu hyd yn oed heb unrhyw fframwaith o gwbl. Mae'n gweithio ym mhobman y mae CSS yn gweithio.

Manteision Tailwind CSS

Mae buddion defnyddio Tailwind CSS yn cynnwys mwy o gynhyrchiant, llai o faint o ffeiliau CSS, a phrofiad gwell gan y datblygwr oherwydd y fethodoleg cyfleustodau-gyntaf. Yn ogystal, mae'r modd Just-In-Time (JIT) yn darparu amseroedd adeiladu cyflym fel mellt, gan gyflymu'ch proses ddatblygu ymhellach.

Prisiau CSS Tailwind

Mae Tailwind CSS yn brosiect ffynhonnell agored, sy'n golygu ei fod yn hollol rhad ac am ddim i'w ddefnyddio. Daw'r gost pan fyddwch chi eisiau cyrchu nodweddion premiwm fel cydrannau a thempledi UI, a gynigir trwy Tailwind UI.

Mae'n farn ac yn hyblyg ar yr un pryd

Mae Tailwind CSS yn rhoi barn gref ar sut i strwythuro'ch CSS, ond eto mae'n ddigon hyblyg i ganiatáu addasu. Mae'r cydbwysedd hwn yn eich galluogi i ganolbwyntio ar yr hyn sydd bwysicaf - adeiladu UI hardd.

Nodweddion modern

Mae Tailwind CSS yn cofleidio nodweddion modern fel Flexbox, Grid, ac eiddo arfer, gan ei wneud yn ddewis rhagorol ar gyfer datblygu cymwysiadau gwe modern.

Rhagofynion ar gyfer Defnyddio CSS Tailwind

Cyn i chi ddechrau defnyddio Tailwind CSS, mae angen dealltwriaeth sylfaenol arnoch o HTML a CSS.

Pryd i Ddefnyddio CSS Tailwind

Mae Tailwind CSS yn addas ar gyfer pob math o brosiectau gwe, mawr neu fach. Os ydych chi wedi blino ymgodymu â CSS ac yn chwilio am ddatrysiad mwy effeithlon sy'n gyfeillgar i ddatblygwyr, yna mae Tailwind CSS ar eich cyfer chi.

Ddim mewn fframweithiau cydrannol?

Os nad ydych chi'n gefnogwr o fframweithiau cydran fel React neu Vue, peidiwch â phoeni. Mae Tailwind CSS yn fframwaith-agnostig a gellir ei ddefnyddio gyda HTML a JavaScript pur.

Tebygrwydd a Gwahaniaethau Rhwng Tailwind CSS a Fframweithiau CSS Eraill

Tra bod fframweithiau eraill fel Bootstrap a Foundation yn cynnig cydrannau wedi'u cynllunio ymlaen llaw, mae Tailwind CSS yn rhoi'r offer i chi adeiladu dyluniadau cwbl arferol heb adael eich HTML. Fodd bynnag, gydag integreiddio llyfrgelloedd cydrannau fel daisyUI, gallwch nawr fwynhau'r gorau o ddau fyd.

Modd Tywyll

Un o nodweddion diweddaraf Tailwind CSS a daisyUI yw'r modd tywyll, sy'n eich galluogi i greu gwefannau â thema dywyll yn ddiymdrech.

Enghraifft Flexbox

Mae Tailwind CSS yn integreiddio'n dda â nodweddion CSS modern fel Flexbox. Er enghraifft, gallwch greu cynllun Reactol gan ddefnyddio dosbarthiadau fel fflecs, canolfan gyfiawnhau, canolfan eitemau, ac ati.

Gyda'r cyfuniad o Mewn Union Bryd, gallwch chi roi cynnig ar wahanol werthoedd dosbarth cyfleustodau yn hawdd. Os na weithiodd un dosbarth cyfleustodau, newidiwch ef i addasu eich elfen.

Enghraifft o Gynllun Flexbox

Gan ddefnyddio Tailwind CSS, mae'n hawdd creu cynlluniau cymhleth fel bar llywio Reactol. Dyma enghraifft:

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

Cydrannau parod

Os penderfynoch ddefnyddio cod css tailwind yn eich prosiect, byddwch yn gallu dod o hyd i lawer o gydrannau parod ar-lein. Gallwch gopïo unrhyw un o'r rhain a'u haddasu ar gyfer eich gwefan eich hun.

Sut i drosi CSS i CSS Tailwind

Mae gallu trosi CSS yn ddosbarthiadau CSS Tailwind yn rhywbeth sydd ei angen ar y mwyafrif o ddatblygwyr. Mae llawer o wefannau ar y rhyngrwyd a adeiladwyd cyn bod Tailwind CSS yn bodoli. Mae'r tudalennau gwe hyn yn defnyddio css gyda thaflen arddull ac mae gweithwyr proffesiynol datblygu gwe am symud y tudalennau hyn i Tailwind CSS.

Offeryn datblygu gwe yw DivMagic a adeiladwyd ar gyfer datblygwyr gwe a datblygwyr meddalwedd. Mae'n caniatáu i unrhyw arddull gael ei gopïo o css fanila i CSS Tailwind. Gydag un clic, gallwch chi drosi unrhyw gydran ar y rhyngrwyd i Tailwind CSS a defnyddio Tailwind yn eich prosiect ac addasu'r arddull unrhyw ffordd rydych chi ei eisiau.

Plymiwch yn ddwfn i Athroniaeth CSS Tailwind

Yr athroniaeth y tu ôl i Tailwind CSS yw canolbwyntio ar ddefnyddioldeb. Mae hyn yn golygu yn lle rhagddiffinio dosbarthiadau cydran, mae Tailwind CSS yn darparu dosbarthiadau cyfleustodau lefel isel sy'n eich galluogi i adeiladu dyluniadau unigryw heb adael eich HTML.

Pam symud i ffwrdd o CSS Traddodiadol?

Gall CSS traddodiadol achosi defnydd gormodol o wrthwneud, ffeiliau chwyddedig, a 'div soup'. Trwy symud i fframwaith CSS cyfleustodau-gyntaf fel Tailwind CSS, gallwch liniaru'r materion hyn, gan arwain at gronfa god lanach a symlach.

Profwch Grym Dosbarthiadau Cyfleustodau

Mae dosbarthiadau cyfleustodau yn eich helpu i osgoi ailadrodd yr un arddulliau trwy gydol eich dalennau arddull. Mae'n egwyddor o "Peidiwch ag Ailadrodd Eich Hun" (Sych). Mae'r dosbarthiadau hyn yn arbed amser ac ymdrech sylweddol i chi ac yn arwain at gronfa god hynod gynaliadwy.

Archwilio Cyfarwyddebau CSS Tailwind

Mae Tailwind CSS yn cyflwyno ychydig o gyfarwyddebau y gellir eu defnyddio o fewn eich dalennau arddull. Mae'r rhain yn cynnwys @apply , @variants , a @screen. Gall deall a defnyddio'r cyfarwyddebau hyn wella'ch profiad CSS Tailwind yn fawr. Gellir gosod y rhain yn y ffeil CSS Tailwind Config. Gallwch chi ysgrifennu dosbarthiadau css gan ddefnyddio'r dull hwn.

Ymestyn CSS Tailwind gydag Ategion

Gellir ymestyn Tailwind CSS gydag ategion, ychwanegu swyddogaethau newydd neu addasu'r un presennol. Dysgwch sut i drosoli ategion i wneud y mwyaf o effeithlonrwydd ac esthetig eich prosiectau gwe.

Ymgorffori Tailwind CSS yn Eich Llif Gwaith

Mae integreiddio Tailwind CSS i'ch llif gwaith datblygu yn syml, p'un a ydych chi'n defnyddio offer adeiladu fel Webpack neu Parcel, neu'n gweithio gyda fframweithiau fel Next.js neu Gatsby.

Gwella Hygyrchedd gyda CSS Tailwind

Mae Tailwind CSS yn annog dylunio hygyrch trwy gynnwys ystod o briodoleddau ARIA yn ei ddosbarthiadau. Creu rhyngwynebau mwy hygyrch a gwella profiad y defnyddiwr i bawb.

Harneisio Pŵer Flexbox a Grid gyda CSS Tailwind

Trosoleddwch fodiwlau cynllun CSS modern fel Flexbox a Grid gyda Tailwind CSS. Dysgwch sut y gellir defnyddio dosbarthiadau cyfleustodau i reoli gosodiad mewn modd hyblyg ac Reactol.

Sut i ddadfygio Eich Prosiectau CSS Tailwind

Mae Tailwind CSS yn darparu nifer o offer a thechnegau dadfygio sy'n ei gwneud hi'n haws nodi a datrys problemau steilio. Deall yr offer hyn a gwella'ch sgiliau dadfygio.

Creu Gwe Lliwgar gyda CSS Tailwind

Daw Tailwind CSS gyda phalet eang o liwiau y gellir eu haddasu. Dysgwch sut i ddefnyddio ac addasu'r lliwiau hyn i greu dyluniadau bywiog sy'n apelio yn weledol.

Datblygu'n Gyflymach gyda Modd JIT Tailwind CSS

Ymchwiliwch yn ddyfnach i fodd Just-In-Time CSS Tailwind. Deall sut mae'n gweithio a sut y gall gyflymu eich amser datblygu ac adeiladu yn sylweddol.

O Sero i Arwr: Master Tailwind CSS

Cychwyn ar daith i feistroli Tailwind CSS. O sefydlu'ch amgylchedd i archwilio pynciau uwch, mae'r canllaw cynhwysfawr hwn wedi ichi roi sylw iddo.

Addasu Tailwind CSS i'ch Anghenion

Un o gryfderau mwyaf Tailwind CSS yw ei hyblygrwydd. Dysgwch sut i addasu Tailwind i weddu i anghenion penodol eich prosiect.

Mynd i'r afael â CSS Tailwind

Cymryd rhan mewn dysgu ymarferol trwy gyfres o enghreifftiau ymarferol. Archwiliwch sut i adeiladu amrywiaeth o gydrannau gwe gan ddefnyddio Tailwind CSS a DaisyUI.

Mudo o Fframweithiau CSS Eraill i CSS Tailwind

Ystyried newid i Tailwind CSS? Deall y gwahaniaethau allweddol rhwng Tailwind a fframweithiau eraill, a dysgu strategaethau effeithiol ar gyfer mudo eich prosiectau.

Gallwch ddefnyddio DivMagic neu offer tebyg i gynyddu eich cyflymder mudo yn sylweddol.

Mae offer datblygu gwe fel DivMagic yn caniatáu ichi gopïo unrhyw elfen, unrhyw ddyluniad ac unrhyw arddull o unrhyw wefan gydag un clic.

Enghraifft Syml: Adeiladu Cydran Cerdyn Reactol

Dyma enghraifft o sut y gallwch chi adeiladu cydran cerdyn Reactol gan ddefnyddio Tailwind CSS. Bydd y gydran hon yn cynnwys delwedd, teitl, a disgrifiad.

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

Adeiladu Ffurflen gyda CSS Tailwind

Mae creu ffurflen gyda Tailwind CSS yn syml ac yn reddfol. Dyma ffurflen gyswllt syml:

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

Addasu CSS Tailwind

Mae Tailwind CSS yn caniatáu ichi addasu ei ffurfweddiad diofyn, gan deilwra'r dosbarthiadau cyfleustodau i'ch anghenion. Isod mae enghraifft o sut i addasu'r palet lliw.

Mae'r enghreifftiau hyn yn dangos hyblygrwydd a symlrwydd Tailwind CSS, gan ddangos sut y gallant eich helpu i greu cydrannau gwe modern, Reactol yn effeithlon ac yn effeithiol.

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

A fydd angen unrhyw ffeil CSS arnaf?

Yr unig ffeil sydd ei hangen arnoch chi gyda Tailwind CSS yw'r ffeil tailwind.config.js.

Bydd y ffeil honno'n dal eich gosodiadau ffurfweddu. Ni fyddwch yn ysgrifennu css nac yn cael unrhyw ffeil css arall. Y ffeil ffurfweddu hon yw'r unig un y bydd ei hangen arnoch.

Beth yw'r arferion gorau ar gyfer Tailwind CSS?

I gael esboniad manwl ar arferion gorau Tailwind CSS, gweler ein herthygl arall Arferion Gorau Tailwind CSS.

Tailwind CSS: Dyfodol Dylunio Gwe

Myfyriwch ar sut mae Tailwind CSS yn siapio dyfodol dylunio gwe. Dysgwch am ei ddylanwad a'i botensial ar gyfer twf yn y diwydiant datblygu gwe.