Tailwind CSS este un cadru de utilitate CSS care permite dezvoltatorilor să proiecteze componente web personalizate fără a trece la un fișier CSS. În acest tutorial, veți învăța cum să instalați Tailwind CSS în React și cum îl puteți utiliza pentru a construi o pagină React simplă.

De ce să folosiți CSS Tailwind?

Sunt deja multe CSS cadre care simplifică modul în care dezvoltatorii proiectează paginile web. Deci, de ce ar trebui să utilizați Tailwind CSS?

Cadrele CSS, cum ar fi Bootstrap și Foundation, sunt cadre cu opinii, ceea ce înseamnă că oferă dezvoltatorilor componente predefinite care au stiluri implicite. Acest lucru limitează atât personalizarea, cât și creativitatea și ajungeți cu site-uri web care arată destul de generice.

Tailwind CSS, cu toate acestea, este un cadru de utilitate care vă oferă controlul creativ pentru a crea componente dinamice. Și, spre deosebire de Bootstrap, puteți personaliza cu ușurință designurile după cum doriți.

Un alt avantaj al utilizării Tailwind CSS este că ajungeți cu o dimensiune mică a pachetului CSS, deoarece elimină toate CSS neutilizat în timpul procesului de construire (care este diferit de Bootstrap, deoarece include toate fișierele CSS în construi).

Aflați mai multe despre diferențele dintre Tailwind CSS și Bootstrap din articolul nostru pe această temă.

Dezavantajele utilizării CSS Tailwind

Tailwind CSS are o curbă abruptă de învățare chiar și pentru dezvoltatorii experimentați. Este nevoie de ceva timp pentru a învăța cum să utilizați pe deplin clasele de utilitate și poate fi necesar să vă referiți des la documentație. Cu toate acestea, după ce vă familiarizați cu clasele, veți găsi că este mai ușor și mai rapid în comparație cu CSS simplu.

Majoritatea dezvoltatorilor le place să urmeze principiul separării preocupărilor, astfel încât fișierele CSS și HTML să fie scrise în fișiere diferite. Cu Tailwind CSS, scrieți CSS-ul direct în marcajul HTML - un dezavantaj pentru unii.

Chiar și cu aceste dezavantaje, Tailwind CSS este un cadru pe care ar trebui să îl luați în considerare cu seriozitate dacă vă simțiți deja confortabil cu CSS și doriți să construiți design-uri mai rapid.

Noțiuni introductive: creați un proiect React

Rulați următoarea comandă în terminal pentru a schelă a Reacţiona utilizarea aplicației create-react-app.

npx create-react-app react-tailwind

create-react-app oferă o modalitate ușoară de a crea o aplicație React fără a configura instrumente de construcție precum webpack, babel sau linters. Aceasta înseamnă că ajungeți la un mediu React funcțional în câteva minute.

Comanda de mai sus creează un nou folder numit reacție-vânt coadă. Navigați la dosar și deschideți-l folosind editorul de text preferat.

cd react-vent tail

Apoi, instalați Tailwind CSS și configurați-l să funcționeze cu aplicația React.

Utilizați Tailwind CSS în React

Instalați Tailwind CSS și dependențele sale cu această comandă:

npm instalează tailwindcss postcss autoprefixer

PostCSS folosește pluginuri JavaScript pentru a face CSS compatibil cu majoritatea browserelor. Verifică browserul în care rulează aplicația și determină polifillurile necesare pentru ca CSS-ul să funcționeze fără probleme. Autoprefixer este un plugin PostCSS care utilizează valori de la caniuse.com pentru a adăuga automat prefixe de furnizor la regulile CSS.

Inițializați CSS Tailwind

Rulați vânt din spate init comandă pentru a genera fișiere de configurare implicite CSS Tailwind.

npx tailwindcss init

Aceasta creează tailwind.config.js în folderul rădăcină care stochează toate fișierele de configurare ale Tailwind și conține următoarele:

module.exports = {
 conținut: [],
 tema: {
 extinde: {},
 },
 pluginuri: [],
}

Configurați căile pentru șabloane

Trebuie să spuneți lui Tailwind CSS fișierele pe care ar trebui să le verifice pentru a vedea ce clase CSS sunt folosite. Acest lucru permite Tailwind să identifice și să elimine clasele neutilizate și, prin urmare, reduce dimensiunea CSS-ului generat.

În tailwind.config.js, adăugați căile șablonului sub cheia de conținut.

module.exports = {
 continut: [
 „./src/**/*.{js, jsx, ts, tsx}”,
 ],
 tema: {
 extinde: {},
 },
 pluginuri: [],
}

Injectați CSS Tailwind în React

Următorul pas este să includeți Tailwind CSS în aplicația folosind @vânt de coadă directive.

Șterge totul din index.css și adăugați următoarele pentru a importa stilurile de bază, componentele și utilitățile.

@bază vânt coadă;
componente @tailwind;
utilități @tailwind;

În cele din urmă, asigură-te index.css este importat în index.js și Tailwind CSS va fi gata de utilizare.

Utilizarea CSS Tailwind pentru a stila o componentă React

Veți crea pagina web simplă de mai jos și o veți stila folosind clasele de utilitate ale Tailwind.

Această pagină conține două secțiuni principale: a bară de navigare, și secțiunea eroi (care are un titlu și un buton).

Pentru a ilustra modul în care Tailwind CSS facilitează scrierea CSS, încercați să modelați pagina web folosind CSS simplu și Tailwind CSS.

Începeți prin modificarea App.js în src folder pentru a elimina codul inutil.

importați „./App.css”
function App() {
 întoarcere (



 );
}
exportați aplicația implicită;

Apoi, adăugați conținutul paginii web la App.js.

import „./App.css”;
function App() {
 întoarcere (







 Tailwind CSS facilitează stilarea componentelor React!



Incepe






 );
}

Pentru a utiliza CSS simplu, adăugați CSS la App.css.

nav {
 display: flex;
 justificare-conținut: spațiu-între;
 umplutură: 16px 36px;
 culoare: #000;
 box-shadow: 0px 2px 5px 0px rgba (168, 168, 168, 0,75);
}
.siglă {
 dimensiunea fontului: 18px;
 greutatea fontului: bold;
}
ul {
 stil-listă: niciunul;
 display: inline-flex;
}
ul li {
 margine-stânga: 16px;
 cursor: pointer;
}
.erou {
 display: flex;
 flex-direcție: coloană;
 alinierea elementelor: centru;
 margine-sus: 64px;
}
h1 {
 dimensiunea fontului: 36px;
 text-align: centru;
}
.btn {
 culoare de fundal: #000000;
 culoare: #fff;
 umplutură: 10px;
 lățime: potrivire-conținut;
 margine-sus: 36px;
}

Cu Tailwind CSS, nu trebuie să scrieți regulile CSS pentru fiecare clasă. În schimb, utilizați clase de utilitate. Acestea sunt clase care fac obiectul unei singure proprietăți CSS. De exemplu, dacă doriți să creați un buton cu un fundal negru și culoarea textului alb, trebuie să utilizați bg-negru și text-alb clase de utilitate.

App.js ar trebui să arate așa.

function App() {
 întoarcere (







 Tailwind CSS facilitează stilarea componentelor React!




 Incepe







 );
}

Nu trebuie să importați App.css deoarece stilurile generate de Tailwind CSS sunt stocate în index.css în care ai importat index.js mai devreme.

În comparație cu CSS simplu, această abordare are ca rezultat mai puțin cod ușor de înțeles.

Cod în stil cu CSS Tailwind

În acest articol, ați aflat despre Tailwind CSS, punctele sale forte, dezavantajele și cum puteți utiliza clasele sale de utilitate în aplicațiile React. În afară de cursuri, Tailwind CSS oferă și alte funcții suplimentare, inclusiv capacitatea de a crea machete receptive și componente reutilizabile.

Dar, așa cum am menționat mai devreme, Tailwind este departe de singurul cadru CSS de pe piață. Pe care îl vei folosi pentru următorul tău proiect?

Tailwind CSS vs. Bootstrap: Care este un cadru mai bun?

Atunci când alegeți un cadru CSS, este important să îl găsiți pe cel care corespunde cerințelor dumneavoastră.

Citiți în continuare

Despre autor