Utility-First CSS me Tailwind

Utility-First CSS me Tailwind

Shkruar nga Andy Li

Në vitet e fundit, CSS-ja e parë e shërbimeve ka qenë një prirje popullore brenda peizazhit të pjesës së përparme. Ju mund ta keni parë atë të përmendur së bashku me një mjet të quajtur Tailwind CSS.

Pra, çfarë është "dobia"?

Çfarë problemi zgjidh kjo qasje e parë e shërbimeve?

Si përshtatet Tailwind në këtë?

Dhe më e rëndësishmja: si e aplikoni Tailwind në një aplikacion Vue.js?

Ne do t'i përgjigjemi të gjitha këtyre në këtë tutorial. Dhe nëse preferoni të shikoni video, mund të shikoni kursin Utility-First CSS with Tailwind nga Vue Mastery. (Tre mësimet e para në atë kurs korrespondojnë me përmbajtjen e këtij artikulli.)

Çfarë është Utility-first CSS?

Le të fillojmë me disa kode klasike CSS/HTML për demonstrim:

CSS

.container {
  background-color: lightgray;
  padding: 20px;
  width: 500px;
  margin: 20px;
}
.heading {
  font-size: 20px;
  font-family: Arial;
  margin: 0;
}

HTML

<div class="container">
  <h1 class="heading">Utility-first CSS?</h1>
</div>

Me qasjen e parë të dobisë, sa më sipër mund të rifaktorohet në diçka të tillë:

CSS

.bg-light-gray { background-color: lightgray; }
.p-20px { padding: 20px; }
.w-500px { width: 500px; }
.m-20px { margin: 20px; }
.font-20px { font-size: 20px; }
.arial { font-family: Arial; }
.m-0 { margin: 0; }

HTML

<div class="bg-light-gray p-20px w-500px m-20px">
  <h1 class="font-20px arial m-0">Utility-first CSS?</h1>
</div>

Siç mund ta shihni, ai thjesht po zëvendëson klasat e nivelit të lartë, të tilla si container dhe heading, me klasat e nivelit të ulët, si bg-light-gray dhe p-20px.

Këto klasa të nivelit të ulët quhen klasa të shërbimeve. Ju mund t'i mendoni ato si mallra të dizajnit të nivelit të ulët me emra të parashikueshëm. Kjo është arsyeja pse ato quhen edhe klasa atomike.

Pa shikuar përkufizimin e h-200px, ju tashmë e dini se ndoshta është diçka si kjo:

.h-200px {
  height: 200px
}

Nuk do t'ju duhet kurrë të modifikoni një klasë të shërbimeve. Nëse ju duhet të ndryshoni pamjen dhe ndjesinë e aplikacionit tuaj, thjesht ndryshoni atë në HTML duke shtuar/hequr klasat e shërbimeve.

Për shembull, nëse nuk kam më nevojë për një ngjyrë sfondi, thjesht do të hiqja klasën bg-light-gray si kjo:

<div class="p-20px w-500px m-20px">
  <h1 class="font-20px arial m-0">Utility-first CSS?</h1>
</div>

Ndërsa në konfigurimin tradicional, do të më duhej të ndryshoja përmbajtjen e klasës container si kjo:

.container {
  /* background-color: lightgray; */
  padding: 20px;
  width: 500px;
  margin: 20px;
}

Në fillim, kjo nuk duket si një ndryshim i madh. Është vetëm një çështje e modifikimit të CSS ose modifikimit të HTML. Por kjo ka një implikim të madh për sa i përket mirëmbajtjes.

Nëse ndryshoni duke modifikuar CSS, keni nevojë për kujdes shtesë për t'u siguruar që ndryshimi të mos ndikojë në ndonjë gjë të paqëllimshme. Por nëse ndryshoni duke modifikuar vetëm HTML-në, ju e dini me siguri se ndryshimi po ndikon vetëm në vetë HTML-në që ju modifikoni.

Përfitimi kryesor i përdorimit të klasave të shërbimeve është thjesht ky: nuk duhet të shqetësoheni për pasojat e padëshiruara të shtimit/heqjes së stileve.

Për zhvilluesit e Vue.js. kjo mund të mos jetë aq e madhe nëse tashmë po përdorni <style scoped>. Por nëse keni shumë CSS të ndarë në komponentë të ndryshëm, siguria për të ditur se çfarë do të ndikojë ndryshimi juaj është ende shumë e dobishme. Qasja e parë e përdorimit vjen me një filozofi unike për ndarjen e kodit që do të zbatojë këtë siguri.

Mirë, por pse na duhet Tailwind?

Vini re se në shembullin e mësipërm, as që na duhej të përdornim ndonjë kornizë. Pra, pse na duhet Tailwind, ose ndonjë kornizë e ngjashme për këtë çështje?

Së pari, dikush duhet të krijojë të gjitha këto klasa CSS Utility (qindra prej tyre), kështu që ose i krijoni ato vetë, ose mund të përdorni një zgjidhje ekzistuese me konventa emërtimi të miratuara gjerësisht.

Së dyti, një kornizë ofron veçori më të dobishme.

Për shembull, mund të përdorni një klasë të gjeneruar në mënyrë dinamike me një vlerë arbitrare si kjo:

<h1 class="p-[20px]">Utility-first CSS?</h1>

Kjo klasë nuk ekziston si parazgjedhje, por do të krijohej në mënyrë dinamike në kohën kur të ekzekutohet ky kod.

Më vonë do të flas më shumë se si krijohet kjo lloj klase dinamike. Tani për tani, thjesht dijeni se ka veçori më të dobishme në dispozicion nëse jeni duke përdorur një kornizë.

Së fundi, një kornizë mund të personalizohet me cilësimet tuaja të konfigurimit. Ne do të bëjmë pikërisht këtë në pjesën tjetër të serialit.

Tani le të instalojmë Tailwind dhe të shohim se për çfarë bëhet fjalë.

Vendosja e projektit

Kjo seri mësimore është në stilin e të mësuarit duke rifaktoruar. Pra, le të kapim së pari këtë aplikacion shembull nga GitHub:

git clone https://github.com/Code-Pop/tailwind-tutorial.git

Ky aplikacion nuk vjen me tailwind të para-instaluar, kështu që le të instalojmë tailwind tani:

package.json

"devDependencies": {
  "autoprefixer": "^10.4.7",
  "postcss": "^8.4.14",
  "tailwindcss": "^3.1.6",
  ...

Të gjitha këto janë devDependencies, që do të thotë se nuk na duhen gjatë prodhimit. Të tre këto paketa përdoren për përpunimin e kodit tuaj CSS.

tailwindcss është një shtojcë për postcss, kështu që postcss është në thelb motori me të cilin funksionon tailwind. autoprefixer është një shtesë tjetër që ju lejon të shkruani rregulla CSS agnostike të shfletuesit dhe do të kujdeset për shtimin e prefikseve të shitësit. Ne nuk do të përdorim drejtpërdrejt autoprefixer, por është një varësi e devijimit për Tailwind.

Më pas, duhet të shtojmë disa skedarë konfigurimi për tailwindcss dhe postcss. Ne mund ta bëjmë këtë duke përdorur këtë komandë:

npx tailwindcss init -p

Tani kemi dy skedarë të rinj:

• tailwind.config.js
• postcss.config.js

Nuk kemi pse të ndryshojmë konfigurimin postcss. Por në konfigurimin tailwind, ne duhet t'i bëjmë Tailwind të dijë se cilat skedarë të skanojë:

📃 tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.vue",
  ],
  ...

Po i themi që të skanojë vetëm skedarët me shtesën .vue. Ne do të përdorim vetëm klasat e shërbimeve brenda skedarëve përbërës.

Së fundi, duhet të shkojmë te skedari main.css dhe të shtojmë këtë në krye të skedarit:

📃 src/assets/main.css

@tailwind utilities;

Kjo do të kujdeset për importimin e çdo gjëje CSS tailwind që gjeneron për ne në aplikacionin tonë.

Me dëshirë:

Nëse dëshironi një rivendosje stili, mund të bëni @tailwind base; Meqenëse ky aplikacion ka tashmë stilet e tij bazë, ne nuk do të përdorim bazën @tailwind. Por nëse po filloni me një aplikacion krejt të ri, është një ide e mirë ta përdorni atë.

Ju gjithashtu mund të bëni @tailwind components; nëse dëshironi të përdorni bibliotekën e komponentëve TailwindUI. Por ne thjesht do të përdorim Tailwind CSS në këtë seri mësimore. TailwindUI dhe Tailwind CSS janë dy projekte të lidhura, por të ndryshme.

Tani që gjithçka është konfiguruar siç duhet, le të kalojmë te komponentët.

Komponentët

Ka dy komponentë në këtë aplikacion: App.vue dhe ProductDisplay.vue.

Komponenti Aplikacioni po importon dhe jep komponentin ProductDisplay. Shumica e stileve janë të vendosura në komponentin ProductDisplay.

Nëse përdorni aplikacionin:

npm run dev

Duket kështu në shfletues:

Në këtë tutorial, ne do të fillojmë me komponentin më të thjeshtë, App.vue. (Mund të shikoni kursin Utility-First CSS with Tailwind nëse dëshironi të shihni rifaktorimin e plotë të App.vue dhe ProductDisplay.vue.)

Rifaktorimi

Procesi i rifaktorimit është i drejtpërdrejtë. Ne vetëm duhet të ndërrojmë secilën nga këto rregulla CSS me klasat e tyre të shërbimeve përkatëse:

📃 src/App.vue

Siç mund ta shihni, disa nga rregullat e CSS janë hartuar në më shumë se një klasë të shërbimeve, të tilla si rregulli i kufirit dhe rregulli i gradientit. Pra, kjo nuk është gjithmonë një hartë një-për-një.

Më pas, ne vendosim klasat brenda HTML:

📃 src/App.vue

<template>
  <div class="h-[60px] mb-[25px] bg-gradient-to-r from-[#16c0b0] to-[#84cf6a]">
  </div>
  <div class="my-[25px] mx-[100px] float-right border border-solid border-light-gray p-[30px] bg-white">
    Cart({{ cart.length }})
  </div>
  ...

Tani, mund të hiqni CSS-në origjinale:

📃 src/App.vue

<style scoped>
/* 
.nav-bar {
  height: 60px;
  margin-bottom: 25px;
  background: linear-gradient(90deg, #16c0b0, #84cf6a);
}
.cart {
  margin: 25px 100px;
  padding: 30px;
  border: 1px solid #d8d8d8;
  background-color: white;
  float: right;
} */
</style>

Nëse e kontrolloni përsëri në shfletues, duhet të duket tamam si më parë:

Klasat

Le të kalojmë nëpër këto klasa të shërbimeve, një nga një:

📃 src/App.vue

<template>
  <div class="h-[60px] mb-[25px] bg-gradient-to-r from-[#16c0b0] to-[#84cf6a]">
  </div>
  <div class="my-[25px] mx-[100px] p-[30px] border border-solid border-[#d8d8d8] bg-white float-right">
    Cart({{ cart.length }})
  </div>
  ...

• h do të thotë lartësi, kështu që h-[60px] do të thotë height: 60px
• m do të thotë margin, kështu që mb do të thotë diferencë e poshtme, kështu që mb-[25px] do të thotë margin-bottom: 25px
• my qëndron për kufijtë në boshtin Y, që përfshin margin-top dhe margin-bottom
• mx qëndron për kufijtë në boshtin X, që përfshin margin-left dhe margin-right
• Kombinimi i bg-gradient-to-r, from-[#16c0b0] dhe to-[84cf6a] përdoren për rregullin e gradientit: background: linear-gradient(-90deg, #84cf6a, #16c0b0). to-r do të thotë "djathtas". Përndryshe, mund të përdorni edhe to-l për drejtimin e kundërt të gradientit.
• border, border-solid dhe border-[#d8d8d8] përdoren për rregullin kufitar border: 1px solid #d8d8d8;. Klasa border do të thotë border-width: 1px. Pra, nëse dëshironi një madhësi të ndryshme, mund ta bëni me border-2 ose border-3 për 2px dhe 3px respektivisht. Ju mund ta ndërroni border-solid me klasa të tjera si border-dashed ose border-dotted për një stil tjetër kufiri. Ne po përdorim një palë kllapa për të specifikuar ngjyrën e kufirit.
• bg-white është background-color: white. Përndryshe, mund të përdorni ngjyrën tuaj specifike me sintaksën e kllapave, si p.sh. bg-[#d8d8d8].
• Së fundi, float-right është float: right

Duke parë këto klasa, mund të pyesni veten: si e di emrin e klasës për secilën situatë specifike? Në fund të fundit, ju duhet të dini emrin e një klase për ta përdorur atë.

Këtu vjen në ndihmë "Uebfaqja e dokumentacionit të Tailwind". E tëra çfarë ju duhet të bëni është të kërkoni pronën CSS që ju intereson, dhe ajo do t'ju tregojë klasat e shërbimeve që janë në dispozicion për t'u përdorur.

Për shembull, nëse dëshironi të vendosni font-size të një elementi, por nuk dini çfarë klase të përdorni, thjesht kërkoni "madhësia e shkronjave" në dokumentet Tailwind:

Bracket vs No Bracket

Ju mund të keni vënë re se disa klasa të shërbimeve kanë kllapa, por disa jo.

Sintaksa e kllapave është mënyra se si ne jemi në gjendje të specifikojmë madhësinë e saktë që na nevojitet. Nëse nuk ju pëlqen folja e klasave, mund të përdorni klasat që Tailwind ofron jashtë kutisë.

h-[60px] mund të zëvendësohet me h-16, që përkthehet në 64px.

Nuk është saktësisht e njëjtë me 60px, por është mirë në këtë rast. Unë gjithashtu mund të zëvendësoj mb-[25px] me mb-6, my-[25px] me my-6, mx-[100px] me mx-24 dhe p-[30px] me p-7.

📃 src/App.vue

<template>
  <div class="h-16 mb-6 bg-gradient-to-r from-[#16c0b0] to-[#84cf6a]">
  </div>
  <div class="my-6 mx-24 p-7 border border-solid border-[#d8d8d8] bg-white float-right">
    Cart({{ cart.length }})
  </div>
  ...

Edhe një herë, këto klasa të reja nuk janë madhësitë e sakta që kishim fillimisht, por ato duken shumë më të pastra.

Mund të gjeni më shumë nga këto lloje klasash së bashku me madhësitë e tyre përkatëse px në dokumentacion:

Po kështu, ne mund të zëvendësojmë kodet e ngjyrave Hex me emra miqësorë për përdoruesit që Tailwind ofron jashtë kutisë, të tilla si teal-500 dhe green-500:

📃 src/App.vue

<div class="h-16 mb-6 bg-gradient-to-r from-teal-500 to-green-500">

Ju mund të gjeni "listën e ngjyrave dhe emrat e tyre" në dokumentacion.

Por ngjyrat që na duhen këtu janë shumë specifike, kjo është arsyeja pse ne ende do t'i përmbahemi kodeve hex me sintaksën e kllapave:

📃 src/App.vue

<div class="h-16 mb-6 bg-gradient-to-r from-[#16c0b0] to-[#84cf6a]">

Ne kohe

Siç mund ta keni vënë re tashmë, këto klasa dinamike nuk ekzistojnë si parazgjedhje:

• from-[#16c0b0]
• to-[#84cf6a]
• border-[#d8d8d8]

Për shkak se emrat e tyre përmbajnë vlera arbitrare, Tailwind nuk do të jetë në gjendje t'i krijojë këto klasa paraprakisht.

Në vend të kësaj, motori Tailwind Just-In-Time (JIT) duhet të skanojë kodin tonë për të gjetur këto klasa dhe për të krijuar përkufizimin aktual të klasës për secilën prej tyre.

Për shembull, kur Tailwind po sheh border-[#d8d8d8] në HTML-në tuaj, ai do të vazhdojë dhe do të krijojë përcaktimin e klasës vijuese për ju:

.border-\[\#d8d8d8\] {
  --tw-border-opacity: 1;
  border-color: rgb(216 216 216 / var(--tw-border-opacity));
}

Në fakt, as klasat me pamje normale nuk përgatiten më parë:

• h-16
• mb-6
• my-6
• mx-24
• p-7

Ashtu si ato dinamike, motori Tailwind JIT do të skanojë dhe të japë CSS për secilën nga këto klasa në kohë reale.

Sa herë që ndryshoni dhe ruani kodin tuaj, motori JIT do të funksionojë dhe do të përpilojë stilet që ju nevojiten. Sigurisht, kjo bëhet vetëm në modalitetin e zhvillimit. Për prodhimin, CSS duhet të ndërtohet vetëm një herë.

Kështu që ju mund të pyesni veten… Nëse motori JIT duhet të gjenerojë të dyja këto lloje klasash gjithsesi, si ndryshojnë ato nga njëri-tjetri?

Ato që janë jashtë kutisë janë të emërtuara në mënyrë të arsyeshme, të dokumentuara me konventa të parashikueshme emërtimi dhe të konfigurueshme.

Pra, sa herë që është e mundur, përdorni ato që nuk janë në dispozicion. Dhe nëse keni nevojë për diçka më të personalizuar si pjesë e udhëzuesit tuaj të stilit, mund ta zgjeroni Tailwind me konfigurimet tuaja.

Vazhdon

Nëse dëshironi të vazhdoni të mësoni tema të ndryshme të avancuara të Tailwind, të tilla si përdorimi i Tailwind për dizajn të përgjegjshëm dhe përshtatja e Tailwind, ju lutemi shikoni "Utility-First CSS with Tailwind" kurs nga Vue Mastery.

Botuar fillimisht në "https://www.vuemastery.com" më 29 gusht 2022.