Cum să utilizați Tailwind CSS pentru a dezvolta rapid site-uri web Snazzy

Pe măsură ce avansați ca dezvoltator, este mai probabil să utilizați tehnologii care vă ajută să faceți mai mult scriind mai puțin cod. Un cadru frontend solid precum Tailwind CSS este o modalitate de a realiza acest lucru.

În acest articol, vom afla despre Tailwind CSS — un cadru CSS care ajută la construirea și proiectarea paginilor web. Vom începe prin a explica cum să instalați și să integrați Tailwind CSS în proiectul dvs., să vedem câteva aplicații practice și, de asemenea, cum vă puteți crea stilurile și pluginurile personalizate.

Excitat? Sa incepem!

Ce este Tailwind CSS?

Tailwind CSS este un cadru CSS (Cascading Style Sheets) cu clase predefinite pe care le puteți utiliza pentru a construi și proiecta pagini web direct în marcaj. Vă permite să scrieți CSS în HTML sub formă de clase predefinite.

Vom defini ce este un cadru și ce înțelegem prin „utility-first CSS” pentru a vă ajuta să înțelegeți mai bine despre ce este Tailwind CSS.

Ce este un cadru?

Ca termen general de programare, un cadru este un instrument care oferă componente reutilizabile și gata făcute construite din caracteristicile unui instrument deja existent. Scopul general al creării cadrelor este de a crește viteza de dezvoltare făcând mai puțină muncă.

Acum că am stabilit sensul unui cadru, ar trebui să vă ajute să înțelegeți că Tailwind CSS este un instrument construit pe funcții CSS. Toate funcționalitățile cadrului au fost derivate din stiluri CSS compuse ca clase.

Ce este un cadru CSS de utilitate în primul rând?

Când spunem CSS pe primul loc, ne referim la clase din marcajul nostru (HTML) cu funcționalități predefinite. Acest lucru implică faptul că trebuie să scrieți doar o clasă cu stiluri predefinite atașate acesteia, iar acele stiluri vor fi aplicate elementului.

Într-un caz în care lucrați cu vanilla CSS (CSS fără nici un cadru sau bibliotecă), mai întâi ați da elementului dvs. un nume de clasă și apoi ați atașa diferite proprietăți și valori acelei clase, care, la rândul său, va aplica stilul elementului dvs. .

Vă vom arăta un exemplu. Aici, vom crea un buton cu colțuri rotunjite și un text care spune „Clic pe mine”. Iată cum va arăta butonul:

Vom face mai întâi acest lucru folosind vanilla CSS, apoi folosind clase de utilitate disponibile în Tailwind CSS.

Cu Vanilla CSS

 <button class="btn">Click me</button>

Am dat etichete de buton clasa btn , care vor fi stilizate folosind o foaie de stil externă. Acesta este:

 .btn { background-color: #000; color: #fff; padding: 8px; border: none; border-radius: 4px; }

Cu Tailwind CSS

 <button class="bg-black p-2 rounded">Click me</button>

Toate acestea sunt necesare pentru a obține același efect ca exemplul cu vanilla CSS. Nu a fost creată nicio foaie de stil externă în care trebuie să scrieți stilurile, deoarece fiecare nume de clasă pe care l-am folosit are deja un stil predefinit.

Cerințe preliminare pentru utilizarea CSS Tailwind

Înainte de a utiliza Tailwind CSS, există câteva cerințe preliminare pe care ar trebui să le îndeplinești pentru a utiliza funcțiile cadrului fără dificultăți. Iată câteva dintre ele:

• Bune cunoștințe despre HTML, structura acestuia și cum funcționează
• O bază solidă în CSS - interogări media, flexbox și sistem grid

Unde poate fi folosit Tailwind CSS?

Puteți utiliza Tailwind CSS în proiecte web frontend, inclusiv cadre JavaScript precum React.js, Next.js, Laravel, Vite, Gatsby etc.

Avantaje și dezavantaje ale Tailwind CSS

Iată câteva dintre avantajele utilizării Tailwind CSS:

1. Proces de dezvoltare mai rapid
2. Vă ajută să vă exersați mai mult CSS, deoarece utilitățile sunt similare
3. Toate utilitățile și componentele sunt ușor de personalizat
4. Dimensiunea generală a fișierului pentru producție este de obicei mică
5. Ușor de învățat dacă știți deja CSS
6. Documentare bună pentru învățare

Unele dintre dezavantajele utilizării Tailwind CSS includ:

1. Markup-ul dvs. poate părea dezorganizat pentru proiecte mari, deoarece toate stilurile sunt în fișierele HTML.
2. Nu este ușor să înveți dacă nu înțelegi bine CSS.
3. Sunteți forțat să construiți totul de la zero, inclusiv elementele de intrare. Când instalați Tailwind CSS, acesta elimină toate stilurile CSS implicite.
4. Tailwind CSS nu este cea mai bună opțiune dacă doriți să minimizați timpul petrecut pentru dezvoltarea frontend-ului site-ului dvs. și concentrându-vă în principal pe logica backend-ului.

Când să utilizați CSS Tailwind

Tailwind CSS este cel mai bine folosit pentru a accelera procesul de dezvoltare, scriind mai puțin cod. Vine cu un sistem de proiectare care ajută la menținerea coerenței în diferite cerințe de design, cum ar fi umplutura, spațierea și așa mai departe; cu aceasta, nu trebuie să vă faceți griji cu privire la crearea sistemelor dvs. de proiectare.

De asemenea, puteți utiliza Tailwind CSS dacă doriți să utilizați un cadru care este ușor de configurat, deoarece nu vă obligă să utilizați componente (bare de navigare, butoane, formulare și așa mai departe) în același mod tot timpul; poți alege cum ar trebui să arate componentele tale. Dar nu ar trebui să utilizați niciodată Tailwind dacă nu ați învățat și practicat CSS.

Asemănări și diferențe între CSS Tailwind și alte cadre CSS

Iată câteva asemănări:

1. Ele vă ajută să faceți munca mai rapid.
2. Vin cu clase predefinite.
3. Au fost construite pe reguli CSS.
4. Ambele sunt ușor de învățat și de utilizat cu o cunoaștere de lucru a CSS.

Acum să ne uităm la unele dintre diferențe:

1. Tailwind este diferit de majoritatea cadrelor, deoarece trebuie să vă creați componentele. De exemplu, Bootstrap are componente precum bare de navigare, butoane și așa mai departe, dar cu Tailwind, trebuie să construiți totul singur.
2. Unele cadre precum Bootstrap nu sunt ușor de personalizat, așa că sunteți forțat să folosiți modelele lor de design. În Tailwind, controlezi fluxul a tot.
3. Pentru a utiliza Tailwind sunt necesare cunoștințe aprofundate de CSS. Scrierea numelor de clasă nu este suficientă, deoarece trebuie să le combinați ca și cum ați scrie CSS vanilla pentru a obține același rezultat. Tot ce trebuie să știți în majoritatea celorlalte cadre este ce componentă va fi construită atunci când utilizați un nume de clasă.

Cum să începeți să utilizați Tailwind CSS

Înainte de a instala Tailwind CSS și de a-l integra în proiectul dvs., asigurați-vă că:

1. Aveți instalat Node.js pe computer pentru a utiliza managerul de pachete Node (npm) în terminal.
2. Proiectul dvs. este configurat cu fișierele create.

Iată cum arată structura noastră de proiect în acest moment:

 -Tailwind-tutorial -public -index.html -styles.css -src -styles.css

Apoi, porniți un terminal pentru proiectul dvs. și executați următoarele comenzi:

 npm install -D tailwindcss

Comanda de mai sus va instala cadrul CSS Tailwind ca dependență. Apoi, generați fișierul tailwind.config.js rulând comanda de mai jos:

 npm install -D tailwindcss

Fișierul tailwind.config.js va fi gol când este creat, așa că trebuie să adăugăm câteva linii de cod:

 module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [], };

Căile de fișiere furnizate în matricea de conținut vor permite Tailwind să curețe/elimină orice stiluri neutilizate în timpul construirii.

Următorul lucru de făcut este să adăugați directivele „@tailwind” la fișierul dvs. CSS din folderul src - aici este locul în care Tailwind generează toate stilurile sale de utilitate predefinite pentru dvs.:

 @tailwind base; @tailwind components; @tailwind utilities;

Ultimul lucru de făcut este să porniți procesul de construire rulând această comandă în terminalul dvs.:

 npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

În codul de mai sus, îi spunem lui Tailwind că fișierul nostru de intrare este foaia de stil din folderul src și că orice stiluri pe care le-am folosit trebuie să fie încorporate în fișierul de ieșire din folderul public. --watch permite Tailwind să urmărească fișierul pentru modificări pentru un proces automat de construire; omiterea înseamnă că trebuie să rulăm acel script de fiecare dată când dorim să construim codul nostru și să vedem rezultatul dorit.

Folosind Tailwind CSS

Acum că am instalat și configurat Tailwind CSS pentru proiectul nostru, să vedem câteva exemple pentru a înțelege pe deplin aplicația acestuia.

Exemplu Flexbox

Pentru a utiliza flex în Tailwind CSS, trebuie să adăugați o clasă de flex și apoi direcția elementelor flex:

 <div class="flex flex-row"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

Utilizarea flex-row-reverse va inversa ordinea în care apar butoanele.

flex-col le stivuiește unul deasupra celuilalt. Iată un exemplu:

 <div class="flex flex-col"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

La fel ca în exemplul anterior, flex-col-reverse inversează ordinea.

Exemplu de grilă

Când specificăm coloane și rânduri în sistemul de grilă, adoptăm o abordare diferită, introducând un număr care va determina modul în care elementele vor ocupa spațiul disponibil:

 <div class="grid grid-cols-3"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> <button> Button 4 </button> <button> Button 5 </button> <button> Button 6 </button> </div>

Culori

Tailwind vine cu o mulțime de culori predefinite. Fiecare culoare are un set de variații diferite, cea mai deschisă variație fiind 50 și cea mai închisă fiind 900.

Iată o imagine cu mai multe culori și codurile lor hexadecimale HTML pentru a ilustra acest lucru

Vom da un exemplu despre cum puteți face acest lucru folosind culoarea roșie de mai sus pentru a da unui element buton o culoare de fundal:

 <button class="bg-red-50">Click me</button> <button class="bg-red-100">Click me</button> <button class="bg-red-200">Click me</button> <button class="bg-red-300">Click me</button> <button class="bg-red-400">Click me</button> <button class="bg-red-500">Click me</button> <button class="bg-red-600">Click me</button> <button class="bg-red-700">Click me</button> <button class="bg-red-800">Click me</button> <button class="bg-red-900">Click me</button>

Această sintaxă este aceeași pentru toate culorile din Tailwind, cu excepția alb-negru, care sunt scrise în același mod, dar fără a folosi numere: bg-black și bg-white .

Pentru a adăuga culoarea textului, utilizați clasa text-{color} :

 <p class="text-yellow-600">Hello World</p>

Captuseala

Tailwind are deja un sistem de design care te-ar ajuta să păstrezi o scară consecventă în toate proiectele tale. Tot ce trebuie să știți este sintaxa pentru aplicarea fiecărui utilitar.

Următoarele sunt utilități pentru adăugarea de umplutură la elementele dvs.:

• p denotă umplutură pe întregul element.
• py denotă padding-padding-top și padding-bottom.
• px denotă padding-left și padding-right.
• pt denotă padding-top.
• pr denotă padding-dreapta.
• pb denotă padding-bottom.
• pl denotă padding-left

Pentru a le aplica elementelor dvs., va trebui să utilizați numerele adecvate furnizate de Tailwind - puțin asemănătoare cu numerele care au reprezentat variante de culoare din ultima secțiune. Iată ce ne referim:

 <button class="p-0">Click me</button> <button class="pt-1">Click me</button> <button class="pr-2">Click me</button> <button class="pb-3">Click me</button> <button class="pl-4">Click me</button>

Marja

Utilitățile predefinite pentru umplutură și marjă sunt foarte asemănătoare. Trebuie să înlocuiți p cu un m :

• m
• my
• mx
• mt
• mr
• mb
• ml

Cum se creează un plugin CSS Tailwind

Chiar dacă Tailwind CSS are o mulțime de utilități și sisteme de proiectare deja construite pentru dvs., este totuși posibil să aveți o anumită funcționalitate pe care doriți să o adăugați pentru a extinde ceea ce poate fi folosit Tailwind. Tailwind CSS ne permite să facem acest lucru prin crearea unui plugin.

Să ne murdărim mâinile creând un plugin care adaugă culoarea aqua și un utilitar de rotire care rotește un element cu 150 pe axa X. Vom face aceste utilitare în fișierul tailwind.config.js folosind puțin JavaScript.

 const plugin = require("tailwindcss/plugin"); module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [ plugin(function ({ addUtilities }) { const myUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(myUtilities); }), ], };

Acum, să dezvăluim asta. Primul lucru pe care l-am făcut a fost să importam funcția de plugin a lui Tailwind:

 const plugin = require("tailwindcss/plugin");

Apoi am continuat să ne creăm pluginurile în matricea de pluginuri:

 plugins: [ plugin(function ({ addUtilities }) { const newUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(newUtilities); }), ],

Este posibil să trebuiască să rulați din nou scriptul de compilare după ce ați creat pluginul.

Acum că pluginurile sunt gata, le putem testa:

 <button class="bg-aqua rotate-150deg">Click me</button>

Dacă ați făcut totul corect, ar trebui să aveți un buton cu o culoare aqua cu textul rotit la 150 pe axa X.

rezumat

Framework-urile sunt o opțiune de neprețuit atunci când vine vorba de accelerarea fluxului de lucru. Ele vă ajută să construiți pagini web profesionale și arătoase, menținând în același timp coerența în design. Tailwind CSS oferă multe clase CSS utilitare pentru a vă ajuta să vă duceți designul și dezvoltarea web la nivelul următor.

Acest articol ne-a învățat ce este Tailwind CSS și ce îl face un cadru. Apoi ne-am uitat la procesul de instalare și am văzut câteva exemple care au arătat cum am putea crea pluginuri personalizate pentru a extinde funcționalitatea existentă.

Dacă ați urmărit până în acest punct, atunci aveți acum o înțelegere de bază, dar solidă, a modului în care funcționează Tailwind. Totuși, pentru a vă îmbunătăți utilizarea unui astfel de cadru de utilitate, trebuie să continuați să exersați și să vă creșteți cunoștințele despre CSS dacă nu aveți deja o bază solidă.

Ați folosit în trecut Tailwind CSS sau un alt cadru CSS? Împărtășește-ți gândurile în secțiunea de comentarii!