Tailwind CSS — ātri izveidojiet modernas vietnes, neizejot no HTML

Viegli izveidojiet sarežģītus dizainus

Izmantojot Tailwind CSS, sarežģītu dizainu izveide kļūst par vienkāršu. Lietderību klašu un adaptīvā dizaina utilītu kombinācija ļauj viegli izveidot sarežģītus izkārtojumus, neapdraudot vietnes veiktspēju un apkopi.

Veidojiet jebko

Tailwind CSS skaistums slēpjas tās daudzpusībā. Varat izveidot jebko, sākot no vienkāršas emuāra lapas līdz uzlabotai e-komercijas platformai, vienlaikus izmantojot tās pašas intuitīvās utilītas klases.

Jūs ierobežo tikai jūsu iztēle. Galvenā atšķirība no Vanilla CSS izmantošanas ir ātrums, kādā varat izveidot pielāgotus dizainus.

Tradicionālā pieeja pielāgotu css klašu izmantošanai ar html komponentiem, piemēram, div, div klase, p klase, vienmēr ir iespēja, taču ātruma uzlabojums, ko nodrošina Tailwind CSS, atvieglo jūsu dzīvi.

Paraugprakse faktiski nedarbojas

Tradicionāli CSS tiek rakstīts, izveidojot globālo stilu kopu un uzlabojot tos pa komponentiem. Lai gan šī ir populāra metode, tā var radīt apjomīgu, grūti uzturējamu kodu.

Tailwind CSS apstrīd šo jēdzienu, apgalvojot, ka utilīta CSS piedāvā tīrāku, labāk uzturējamu risinājumu.

Populārākā Tailwind CSS komponentu bibliotēka

daisyUI ir populārākā Tailwind CSS komponentu bibliotēka, kas lepojas ar vairāk nekā 50 iepriekš izstrādātiem komponentiem, 500+ utilītu klasēm un praktiski bezgalīgām iespējām. Tas pasargā jūs no jauna riteņa izgudrošanas ikreiz, kad veidojat jaunu projektu.

Neizgudrojiet riteni katru reizi no jauna

Tā vietā, lai tērētu savu laiku nogurdinošajam procesam, rakstot desmitiem klašu nosaukumu katram jaunam projektam, Tailwind CSS ļauj izmantot labi definētu, semantisko lietderības klašu kopu.

Šīs nodarbības ir atkārtoti lietojamas un harmoniski darbojas ar CSS kaskādi, nodrošinot jums izturīgu pamatu visiem jūsu projektiem.

Tailwind CSS — Utility First CSS ietvars

Tailwind CSS pamatā ir utilīta CSS sistēma. Tas nozīmē, ka tas nodrošina zema līmeņa, saliekamas utilītas klases, kuras varat izmantot, lai izveidotu jebkuru dizainu tieši savā HTML. Vairs nav bezgalīgu CSS failu, tikai vienkāršs un intuitīvs kods.

Izmantojiet semantisko klašu nosaukumus

Semantiskie klašu nosaukumi uzlabo jūsu koda lasāmību, ļaujot vieglāk saprast, ko dara konkrēta klase, tikai aplūkojot tās nosaukumu. Šī ir viena no daudzajām funkcijām, ko Tailwind CSS ir pieņēmusi, lai uzlabotu izstrādātāja pieredzi.

Tīrs CSS. Ietvars Agnostiķis. Darbojas Visur

Tailwind CSS nesaista jūs ar kādu konkrētu sistēmu. Tas ir vienkārši tīrs CSS, tāpēc varat to izmantot ar jebkuru sistēmu vai pat bez ietvara. Tas darbojas visur, kur darbojas CSS.

Tailwind CSS priekšrocības

Tailwind CSS izmantošanas priekšrocības ietver paaugstinātu produktivitāti, samazinātu CSS faila lielumu un uzlabotu izstrādātāja pieredzi, ko nodrošina utilīta vispirms. Turklāt Just-In-Time (JIT) režīms nodrošina zibenīgi ātru izveides laiku, vēl vairāk paātrinot izstrādes procesu.

Tailwind CSS cenas

Tailwind CSS ir atvērtā koda projekts, kas nozīmē, ka tā lietošana ir pilnīgi bez maksas. Izmaksas rodas, ja vēlaties piekļūt augstākās kvalitātes funkcijām, piemēram, lietotāja interfeisa komponentiem un veidnēm, kas tiek piedāvātas, izmantojot Tailwind UI.

Tas ir pārdomāts un vienlaikus elastīgs

Tailwind CSS sniedz pārliecinošu viedokli par to, kā strukturēt jūsu CSS, tomēr tas ir pietiekami elastīgs, lai ļautu to pielāgot. Šis līdzsvars ļauj koncentrēties uz vissvarīgāko — skaistu lietotāja interfeisu veidošanu.

Mūsdienīgas iespējas

Tailwind CSS ietver tādas modernas funkcijas kā Flexbox, Grid un pielāgotus rekvizītus, padarot to par lielisku izvēli modernu tīmekļa lietojumprogrammu izstrādei.

Priekšnosacījumi Tailwind CSS izmantošanai

Pirms sākat lietot Tailwind CSS, jums ir nepieciešamas pamatzināšanas par HTML un CSS.

Kad izmantot Tailwind CSS

Tailwind CSS ir piemērots visu veidu tīmekļa projektiem, lieliem vai maziem. Ja esat noguris no cīņas ar CSS un meklējat efektīvāku, izstrādātājiem draudzīgāku risinājumu, Tailwind CSS ir domāts jums.

Vai neietilpst komponentu ietvaros?

Ja neesat tādu komponentu sistēmu kā React vai Vue cienītājs, neuztraucieties. Tailwind CSS ir ietvara agnostisks, un to var izmantot ar tīru HTML un JavaScript.

Līdzības un atšķirības starp Tailwind CSS un citiem CSS ietvariem

Lai gan citas sistēmas, piemēram, Bootstrap un Foundation, piedāvā iepriekš izstrādātus komponentus, Tailwind CSS sniedz jums rīkus, lai izveidotu pilnīgi pielāgotus dizainus, neatstājot HTML. Tomēr, integrējot komponentu bibliotēkas, piemēram, daisyUI, tagad varat baudīt labāko no abām pasaulēm.

Tumšais režīms

Viena no jaunākajām Tailwind CSS un daisyUI funkcijām ir tumšais režīms, kas ļauj bez piepūles izveidot tumšas tēmas vietnes.

Flexbox piemērs

Tailwind CSS labi integrējas ar modernām CSS funkcijām, piemēram, Flexbox. Piemēram, varat izveidot adaptīvu izkārtojumu, izmantojot tādas klases kā flex, justify-center, items-center un tā tālāk.

Izmantojot Just-in-Time kombināciju, varat viegli izmēģināt dažādas lietderības klases vērtības. Ja viena utilīta klase nedarbojās, vienkārši mainiet to, lai pielāgotu savu elementu.

Flexbox izkārtojuma piemērs

Izmantojot Tailwind CSS, ir viegli izveidot sarežģītus izkārtojumus, piemēram, reaģējošu navigācijas joslu. Šeit ir piemērs:

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

Gatavās sastāvdaļas

Ja izlēmāt savā projektā izmantot tailwind css kodu, tiešsaistē varēsiet atrast daudzus iepriekš sagatavotus komponentus. Varat kopēt jebkuru no tiem un pielāgot savai vietnei.

Kā pārvērst CSS par Tailwind CSS

Vairumam izstrādātāju ir nepieciešama iespēja pārvērst CSS par Tailwind CSS klasēm. Internetā ir daudz vietņu, kas izveidotas pirms Tailwind CSS pastāvēšanas. Šajās tīmekļa lapās tiek izmantots css ar stila lapu, un tīmekļa izstrādes speciālisti vēlas migrēt šīs lapas uz Tailwind CSS.

DivMagic ir tīmekļa izstrādes rīks, kas paredzēts tīmekļa izstrādātājiem un programmatūras izstrādātājiem. Tas ļauj kopēt jebkuru stilu no vanilla css uz Tailwind CSS. Ar vienu klikšķi varat pārvērst jebkuru komponentu internetā par Tailwind CSS un izmantot Tailwind savā projektā un pielāgot stilu, kā vēlaties.

Ienirstiet Tailwind CSS filozofijā

Tailwind CSS filozofija ir koncentrēties uz lietderību. Tas nozīmē, ka tā vietā, lai iepriekš noteiktu komponentu klases, Tailwind CSS nodrošina zema līmeņa utilītas klases, kas ļauj izveidot unikālus dizainus, neatstājot HTML.

Kāpēc atteikties no tradicionālā CSS?

Tradicionālā CSS var izraisīt pārmērīgu ignorēšanu, uzpūstus failus un “div zupu”. Pārejot uz utilītprogrammu CSS sistēmu, piemēram, Tailwind CSS, varat atvieglot šīs problēmas, tādējādi iegūstot tīrāku un racionalizētāku kodu bāzi.

Izbaudiet lietderības nodarbību spēku

Lietderības klases palīdz izvairīties no vienādu stilu atkārtošanas visās stilu lapās. Tas ir princips "Neatkārtojiet sevi" (DRY). Šīs nodarbības ietaupa ievērojamu laiku un pūles, kā arī nodrošina ļoti uzturējamu kodu bāzi.

Tailwind CSS direktīvu izpēte

Tailwind CSS ievieš dažas direktīvas, kuras var izmantot jūsu stilu lapās. Tie ietver @apply , @variants un @screen. Šo direktīvu izpratne un izmantošana var ievērojami uzlabot jūsu Tailwind CSS pieredzi. Tos var ievietot Tailwind Config CSS failā. Izmantojot šo pieeju, varat rakstīt css klases.

Paplašiniet Tailwind CSS, izmantojot spraudņus

Tailwind CSS var paplašināt ar spraudņiem, pievienojot jaunu funkcionalitāti vai pielāgojot esošo. Uzziniet, kā izmantot spraudņus, lai maksimāli palielinātu savu tīmekļa projektu efektivitāti un estētiku.

Iekļaujiet Tailwind CSS savā darbplūsmā

Tailwind CSS integrēšana izstrādes darbplūsmā ir vienkārša neatkarīgi no tā, vai izmantojat veidošanas rīkus, piemēram, Webpack vai Parcel, vai strādājat ar tādiem ietvariem kā Next.js vai Gatsby.

Uzlabojiet pieejamību, izmantojot Tailwind CSS

Tailwind CSS veicina pieejamu dizainu, iekļaujot savās klasēs virkni ARIA atribūtu. Izveidojiet pieejamākas saskarnes un uzlabojiet lietotāja pieredzi ikvienam.

Izmantojiet Flexbox un Grid jaudu, izmantojot Tailwind CSS

Izmantojiet modernus CSS izkārtojuma moduļus, piemēram, Flexbox un Grid ar Tailwind CSS. Uzziniet, kā lietderības klases var izmantot, lai elastīgi un atsaucīgi kontrolētu izkārtojumu.

Kā atkļūdot Tailwind CSS projektus

Tailwind CSS nodrošina vairākus atkļūdošanas rīkus un paņēmienus, kas atvieglo stila problēmu noteikšanu un risināšanu. Izprotiet šos rīkus un uzlabojiet savas atkļūdošanas prasmes.

Izveidojiet krāsainu tīmekli, izmantojot Tailwind CSS

Tailwind CSS ir aprīkots ar plašu pielāgojamu krāsu paleti. Uzziniet, kā izmantot un pielāgot šīs krāsas, lai izveidotu košus un vizuāli pievilcīgus dizainus.

Attīstieties ātrāk, izmantojot Tailwind CSS JIT režīmu

Iedziļinieties Tailwind CSS režīmā Just-In-Time. Izprotiet, kā tas darbojas un kā tas var ievērojami paātrināt jūsu izstrādes un izveides laiku.

No nulles līdz varonim: Master Tailwind CSS

Dodieties ceļojumā, lai apgūtu Tailwind CSS. Šajā visaptverošajā rokasgrāmatā jūs varat apskatīt, sākot ar vides iestatīšanu un beidzot ar sarežģītu tēmu izpēti.

Pielāgojiet Tailwind CSS savām vajadzībām

Viena no lielākajām Tailwind CSS priekšrocībām ir tās elastība. Uzziniet, kā pielāgot Tailwind, lai tas atbilstu jūsu projekta īpašajām vajadzībām.

Praktiski iepazīstieties ar Tailwind CSS

Iesaistieties praktiskā apmācībā, izmantojot virkni praktisku piemēru. Izpētiet, kā izveidot dažādus tīmekļa komponentus, izmantojot Tailwind CSS un DaisyUI.

Migrēšana no citiem CSS ietvariem uz Tailwind CSS

Vai apsverat iespēju pāriet uz Tailwind CSS? Izprotiet galvenās atšķirības starp Tailwind un citiem ietvariem un apgūstiet efektīvas projektu migrēšanas stratēģijas.

Varat izmantot DivMagic vai līdzīgus rīkus, lai ievērojami palielinātu migrācijas ātrumu.

Tīmekļa izstrādes rīki, piemēram, DivMagic, ļauj ar vienu klikšķi kopēt jebkuru jebkura dizaina un stila elementu no jebkuras vietnes.

Vienkāršs piemērs: atsaucīga kartes komponenta izveide

Šeit ir piemērs tam, kā varat izveidot adaptīvu kartes komponentu, izmantojot Tailwind CSS. Šajā komponentā būs attēls, nosaukums un apraksts.

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

Veidlapas izveide, izmantojot Tailwind CSS

Veidlapas izveide ar Tailwind CSS ir vienkārša un intuitīva. Šeit ir vienkārša saziņas veidlapa:

<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 pielāgošana

Tailwind CSS ļauj pielāgot tā noklusējuma konfigurāciju, pielāgojot lietderības klases jūsu vajadzībām. Zemāk ir piemērs, kā pielāgot krāsu paleti.

Šie piemēri parāda Tailwind CSS elastību un vienkāršību, parādot, kā tie var palīdzēt efektīvi un produktīvi izveidot mūsdienīgus, atsaucīgus tīmekļa komponentus.

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

Vai man būs nepieciešams kāds CSS fails?

Vienīgais fails, kas jums nepieciešams, izmantojot Tailwind CSS, ir fails tailwind.config.js.

Šajā failā tiks saglabāti jūsu konfigurācijas iestatījumi. Jūs nerakstīsit css vai jums nebūs citu css failu. Šis konfigurācijas fails ir vienīgais, kas jums būs nepieciešams.

Kāda ir Tailwind CSS labākā prakse?

Lai iegūtu detalizētu skaidrojumu par Tailwind CSS paraugpraksi, lūdzu, skatiet mūsu citu rakstu Tailwind CSS paraugprakse.

Tailwind CSS: Web dizaina nākotne

Pārdomājiet, kā Tailwind CSS veido tīmekļa dizaina nākotni. Uzziniet par tā ietekmi un izaugsmes potenciālu tīmekļa izstrādes nozarē.