Configurarea CSS Tailwind într-un proiect React

În cazul bibliotecilor și cadrelor CSS, au fost construite o mulțime de biblioteci minunate pentru a simplifica munca unui dezvoltator în căutarea de a crea interfețe intuitive. Cu toate acestea, destul de multe dintre ele (Bootstrap, Foundation) impun decizii de design greu de anulat; vin cu componente predefinite, prin urmare, eliminând nevoia de personalizare dinamică. Acesta este motivul pentru care Tailwind CSS este considerat a fi o alegere bună pentru construirea de interfețe web din secolul XXI.

Cu Tailwind CSS, puteți crea componentele care se potrivesc cu ceea ce doriți sau la ce lucrați. Aceste componente pot fi create prin valorificarea puterii talentului de utilitate a Tailwind CSS. Dacă te-ai săturat să folosești Bootstrap și altele asemenea, vei găsi că Tailwind CSS este potrivit pentru a lucra la interfețe frumoase pe măsură ce implementezi design-urile de care ai nevoie folosind clasele de utilitate pe care le oferă.

În acest tutorial, veți afla ce este Tailwind CSS și cum să lucrați cu el. În cele din urmă, veți crea un card de profil care folosește clasele de utilitate CSS Tailwind. După aceea, puteți continua să construiți un site web de portofoliu care să vă prezinte abilitățile și alte lucruri la care ați lucrat.

Notă : Deși nu vom scrie CSS în acest tutorial, o bună cunoaștere a CSS vă va fi utilă pe măsură ce lucrați la ceea ce vom acoperi.

Ce este Tailwind CSS?

Tailwind CSS este un cadru CSS de nivel scăzut bazat pe utilitate , menit să ușureze construirea de aplicații web cu viteză și mai puțină concentrare pe scrierea CSS personalizate, fără a părăsi zona de confort a codului dvs. HTML, dar pentru a obține interfețe extraordinare.

De exemplu, puteți stila un buton cu doar câteva clase (în loc să fie întotdeauna nevoit să declarați o singură clasă mare separat de HTML și să scrieți o mulțime de proprietăți pentru a crea ceva):

 <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-4 mt-4"> Button </button>

Alte cadre CSS (cum ar fi Bootstrap, Foundation, Bulma și așa mai departe) vă prezintă diverse componente predefinite (cum ar fi modale, butoane, alerte, carduri). Dar cu Tailwind CSS, poți să -ți faci singur sau ești forțat să-l faci pe al tău, în funcție de modelul proiectului. Un alt mod de a spune, dețineți de fapt componentele și puteți să vă valorificați puterea de personalizare pe orice componentă pe care o alegeți. Aceasta înseamnă că nu mai este nevoie să lupți împotriva cadrului și să încerci să dai seama ce clase trebuie să fie înlocuite pentru a obține rezultatele pe care le-ai urmărit inițial.

De ce să folosiți CSS Tailwind?

Poate că nu ești încă pregătit să trădezi alte framework-uri sau nu ai fost convins să îmbrățișezi bunătățile care vin cu Tailwind CSS. Permiteți-mi să vă ofer câteva motive pentru care ați putea dori să luați în considerare Tailwind CSS.

Fără convenții de denumire

Una dintre cele mai stresante părți ale scrierii CSS personalizate este de a numi clase. În fiecare moment, vă gândiți la ce clasă ar trebui să fie generică sau specifică. Cum le organizați și vă asigurați că sunt în cascadă? Tailwind CSS rezolvă aceste probleme fără probleme, oferind clase bazate pe utilități care pot fi folosite tot timpul .

Cu toate acestea, pot apărea cazuri în care trebuie să denumiți anumite clase. Uneori, acest lucru tinde să se întâmple atunci când trebuie să extrageți anumite componente și să le utilizați mai târziu în design (cu ajutorul directivelor @apply ).

Beneficii cache

Când scrieți CSS personalizat (sau utilizați orice alt cadru CSS tradițional), trebuie să faceți întotdeauna modificări fișierelor dvs. CSS atunci când faceți modificări în design. Cu Tailwind CSS, nu trebuie să vă faceți griji pentru asta, deoarece utilizați aceleași clase din nou și din nou în cadrul markupului. Aceasta înseamnă că nu trebuie să vă spargeți memoria cache CSS de fiecare dată pentru a face mici modificări în design.

Când să nu folosiți CSS Tailwind

Vrei să spui că ar trebui să folosesc întotdeauna Tailwind CSS pentru fiecare proiect? Desigur că nu! Există câteva cazuri de utilizare în care este posibil să nu doriți să utilizați CSS Tailwind.

Dacă lucrați la proiecte mici

Când trebuie să începeți cu un mini-proiect care are un termen limită foarte scurt (în special ceva ce ar folosi câțiva utilizatori sau doar dvs.), atunci Tailwind CSS nu este cea mai bună opțiune. În aceste cazuri, aș recomanda să utilizați Bootstrap, Foundation sau orice alt cadru. Asta pentru că vin cu componente predefinite gata de utilizare (teme cu care să începeți). Cu Tailwind CSS, trebuie să creați propriul dvs.

Dacă ești un începător CSS

Înainte de a vă scufunda în Tailwind CSS pentru orice proiect, este recomandabil să cunoașteți CSS. Începătorii care doresc să folosească Tailwind CSS pentru proiecte bazate pe web ar trebui mai întâi să stăpânească CSS într-o anumită măsură. Oferă clase de utilitate care sunt legate de CSS-ul de bază, prin urmare, numai cei cu cunoștințe solide de CSS pot construi cu ușurință cu acesta.

Dacă nu vă place să adăugați o mulțime de clase la elementele dvs

Când scrieți Tailwind CSS, trebuie să scrieți întotdeauna o mulțime de clase, ceea ce face ca baza de cod (HTML) să pară ocupată și uneori dificil de citit. Dacă preferați să vă păstrați codul ordonat, vă recomandăm să vă gândiți să scrieți CSS personalizat sau să utilizați orice alt cadru CSS (cum ar fi Bootstrap).

Din aceste motive, este timpul să trecem la afacerea zilei: haideți să configuram împreună CSS Tailwind într-un proiect React !

Noțiuni de bază

Pentru a configura proiectul nostru, vom crea o nouă aplicație React folosind create-react-app . Dacă ați făcut deja acest lucru, omiteți acest proces, în caz contrar, executați comanda de mai jos:

 npx create-react-app react-tailwindcss && cd react-tailwindcss

Apoi, instalăm câteva dependențe de dezvoltare. Puteți utiliza oricare dintre opțiunile care funcționează pentru dvs.

Folosind npm

 npm install tailwindcss postcss-cli autoprefixer@9.8.6 -D

Folosind Fire

 yarn add tailwindcss postcss-cli autoprefixer -D

Trebuie să inițializam Tailwind CSS prin crearea configurațiilor implicite. Introdu comanda de mai jos în terminalul tău:

 npx tailwind init tailwind.js --full

Această comandă creează un tailwind.js în directorul de bază al proiectului; fișierul conține configurația, cum ar fi culorile noastre, temele, interogările media și așa mai departe. Este un fișier util care ajută cu seturi predefinite de proprietăți, care vor ajuta la necesitatea re-brandingului anumitor convenții sau proprietăți, dacă este necesar.

Cum se configurează PostCSS?

Documentația PostCSS afirmă că:

„PostCSS este un instrument pentru transformarea stilurilor cu pluginuri JS. Aceste plugin-uri vă pot strică CSS-ul, suporta variabile și mix-uri, transpila viitoarea sintaxă CSS, imaginile inline și multe altele.”

De ce Autoprefixer?

Este necesar să instalați Autoprefixer alături de Tailwind CSS, deoarece Autoprefixer urmărește de obicei caniuse.com pentru a vedea ce proprietăți CSS trebuie să fie prefixate. Prin urmare, Tailwind CSS nu oferă nicio prefixare a furnizorului. Dacă sunteți curios ca pisică în ceea ce privește PostCSS, navigați la documentația lor.

Creați un fișier de configurare PostCSS în directorul de bază manual sau folosind comanda:

 touch postcss.config.js

Adăugați următoarele linii de cod în fișierul dvs. PostCSS:

 const tailwindcss = require('tailwindcss'); module.exports = { plugins: [ tailwindcss('./tailwind.js'), require('autoprefixer') ], };

Deoarece PostCSS este necesar pentru a lintea CSS-ul nostru, de aici această configurație.

Pași de cod

• Am preluat pachetul CSS Tailwind și l-am plasat într-o variabilă.
• Am inclus tailwind.js (configurația noastră de bază implicită) în variabila noastră tailwindcss .
• Am preluat pachetul autoprefixer .

Cum să injectați componentele, utilitățile și stilurile de bază ale Tailwind în aplicația dvs

În interiorul folderului dvs. src , creați un folder, denumiți-l assets , aici ar fi stocate toate stilurile dvs. În acel folder, creați un fișier tailwind.css și, respectiv, un fișier main.css . Fișierul tailwind.css va fi folosit de noi pentru a importa stiluri CSS Tailwind și pentru configurații și reguli personalizate. Main.css va deține stilurile care sunt generate ca urmare a ceea ce avem în fișierul tailwind.css .

În continuare, trebuie să importam stilurile și configurațiile de bază. Vom face asta într-unul dintre fișierele CSS pe care le-am creat mai sus. Adăugați următoarele în fișierul dvs. tailwind.css .

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

Rețineți că am folosit directiva @tailwind pentru a injecta stilurile de base , components și utilities ale lui Tailwind în CSS-ul nostru:

• @tailwind base
  Acest lucru injectează stilurile de bază ale lui Tailwind, care este o combinație de Normalize.css și unele stiluri de bază suplimentare.
  
  Notă : Dacă doriți să obțineți referințele complete ale tuturor stilurilor aplicate de Preflight, consultați această foaie de stil.
• @tailwind components
  Aceasta injectează orice componentă (stiluri reutilizabile, cum ar fi carduri și elemente de formular etc.) înregistrate de pluginuri bazate în fișierul nostru de configurare.
• @tailwind utilities
  Acest lucru injectează toate clasele de utilitare ale Tailwind (inclusiv utilitățile implicite și propriile dvs.), acestea sunt generate pe baza fișierului nostru de configurare.

Tailwind CSS va schimba aceste directive în timpul construirii cu toate CSS-urile generate. Dacă utilizați postcss-import , folosiți aceasta în schimb:

 @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities";

Cum să vă configurați aplicația pentru a vă construi CSS

În continuare, trebuie să ne configuram proiectul pentru a construi stilurile noastre CSS de fiecare dată când rulăm fie comanda npm start , fie comanda yarn start .

Deschideți fișierul package.json și utilizați fragmentul de mai jos în locul părții de script a fișierului package.json :

 "scripts": { "start": "npm run watch:css && react-scripts start", "build": "npm run watch:css && react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css" }

Importul nostru CSS

Trebuie să importam fișierul CSS în mod corespunzător pentru a ne asigura că este urmărit și construit corespunzător atunci când rulăm yarn start sau npm start .

Deschideți fișierul index.js și efectuați următoarele modificări:

1. Importați fișierul nostru main.css și ștergeți import './index.css'; .
   

    import './assets/main.css'

   *index.js* dvs. ar trebui să arate astfel după modificări:

    import React from "react"; import ReactDOM from "react-dom"; import './assets/main.css'; import App from "./App"; ReactDOM.render(<App />, document.getElementById("root"));

2. Mergeți la App.js și ștergeți import logo from './logo.svg'; lăsând doar import React from 'react'; . De asemenea, ștergeți totul din interiorul componentei App . (Nu vă faceți griji dacă App.js pare steril acum - vom adăuga ceva cod pe măsură ce continuăm în această postare.)

Să construim un proiect de card de profil

Acum că configurația noastră funcționează bine și totul arată bine, haideți să construim un card de profil. Cu toate acestea, aș dori să vă arăt care este starea aplicației noastre înainte de a începe.

Pentru a porni aplicația, tastați această comandă npm start sau yarn start .

Veți observa că CSS-ul nostru Tailwind creează fișierele necesare necesare în main.css .

Să începem în proiectul nostru. Iată cum arată codul nostru ( App.js ) fără a implementa clasele CSS Tailwind.

 import React from 'react'; function App() { return ( <div className=""> <img className="" src={require('./profile.jpg')} alt="Display" /> <div className=""> <div className=""> Blessing Krofegha </div> <p className=""> When i'm not coding i switch to netflix with biscuits and cold tea as my companion. <span></span> </p> </div> <div className=""> <span className="">#Software Engineer</span> <span className="">#Writter</span> <span className="">#Public Speaker</span> </div> </div> ); } export default App;

Rezultatul fragmentului de cod de mai sus este astfel următorul:

După cum puteți vedea, tot textul a fost aliniat la stânga în mod implicit. Imaginea este destul de mare pentru că nu există stil. Componenta App are patru divs -uri principale la care vom adăuga clase. Acest lucru va schimba, desigur, stilul elementelor.

Prima div

 import React from 'react'; function App() { return ( <div className="max-w-sm rounded overflow-hidden shadow-lg"> <img className="w-full" src={require('./profile.jpg')} alt="Display" /> <div className=""> <div className=""> Blessing Krofegha </div> <p className=""> When I'm not coding, I switch to Netflix with biscuits and cold tea as my companion. <span></span> </p> </div> <div className=""> <span className="">#Software Engineer</span> <span className="">#Writter</span> <span className="">#Public Speaker</span> </div> </div> ); } export default App;

Pași de cod

Am dat div max-width cu max-w-sm pentru ecrane mici și am adăugat border-radius folosind clasa rounded . Pentru a preveni apariția barelor de defilare, am folosit overflow-hidden .

Pe primul div , ne-am decorat fundalul cu un efect de umbră folosind box-shadow cu clasa shadow-lg . Folosind aceasta înseamnă că am avea o casetă-umbră (efect de umbră) de 0px din partea de sus, 10px din dreapta, 15px din jos și -3px din stânga (cu un negru slab pe left axis ).

Pe right axis , avem 0px de sus, 4px de dreapta, 6px de jos și -2px de jos (cu o nuanță mai deschisă de negru rgba(0,0,0, 0.05) ).

Vrei să spui un nume de clasă simplu, cum ar fi max-w-sm rounded overflow-hidden shadow-lg este responsabil pentru toată această minunatie? Da! Acesta este minunatul CSS Tailwind!

Apoi, am dat img o lățime de 100% cu w-full și un atribut src și, desigur, un atribut alt .

Iată cum ar trebui să arate noul nostru card de profil:

A doua div

Adăugați această clasă px-6 py-4 la al doilea nostru div :

 import React from 'react'; function App() { return ( <div className="max-w-sm rounded overflow-hidden shadow-lg"> <img className="w-full" src={require('./profile.jpg')} alt="Display" /> <div className="px-6 py-4"> <div className=""> Blessing Krofegha </div> <p className=""> When i'm not coding i switch to netflix with biscuits and cold tea as my companion. <span></span> </p> </div> <div className=""> <span className="">#Software Engineer</span> <span className="">#Writter</span> <span className="">#Public Speaker</span> </div> </div> ); } export default App;

Pași de cod

În al doilea nostru div , i-am dat o padding-right/left de 1rem reprezentând px-6 în x-axis și padding-top/bottom de 1.5rem care este py-4 în y-axis .

A treia div

Adăugați clasa font-bold text-purple-500 text-xl mb-2 la al doilea nostru div :

 import React from 'react'; function App() { return ( <div className="max-w-sm rounded overflow-hidden shadow-lg"> <img className="w-full" src={require('./profile.jpg')} alt="Display" /> <div className="px-6 py-4"> <div className="font-bold text-purple-500 text-xl mb-2"> Blessing Krofegha </div> <p className="text-gray-700 text-base"> When i'm not coding i switch to netflix with biscuits and cold tea as my companion. <span></span> </p> </div> <div className=""> <span className="">#Software Engineer</span> <span className="">#Writter</span> <span className="">#Public Speaker</span> </div> </div> ); } export default App;

Pași de cod

Am stabilit font-weight la o valoare de 700 cu clasa font-bold . Apoi, am dat div -ului nostru o culoare violet deschis folosind text-purple-500 și am făcut ca font-size să fie foarte mică folosind text-xl . Am dat div -ului nostru un margin-bottom de 0.5rem folosind mb-2 . De asemenea, am adăugat un paragraph și i-am făcut culoarea o nuanță mai închisă de gri folosind text-gray-700 .

Am adăugat o culoare de text deschisă la paragraful nostru cu text-gray-700 și o dimensiune a fontului de 1em folosind text-base . Prin urmare, text-base este egală font-size: 1rem și text-gray-700 este egală cu color: #4a5568;

Să vedem ce modificări au fost făcute cu a treia div :

A patra div

 import React from 'react'; function App() { return ( <div className="max-w-sm rounded overflow-hidden shadow-lg"> <img className="w-full" src={require('./profile.jpg')} alt="Display" /> <div className="px-6 py-4"> <div className="font-bold text-purple-500 text-xl mb-2"> Blessing Krofegha </div> <p className="text-gray-700 text-base"> When i'm not coding i switch to netflix with biscuits and cold tea as my companion. <span></span> </p> </div> <div className="px-6 py-4"> <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#Software Engineer</span> <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#Writter</span> <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mt-2 ml-20">#Public Speaker</span> </div> </div> ); } export default App;

Pași de cod

La fel ca div -ul anterior menționat mai sus, am adăugat o padding-right/left de 1rem reprezentând px-6 în x-axis și padding-top/bottom de 1.5rem , respectiv, reprezentând py-4 în y-axis .

În cele din urmă, am adăugat câteva clase la spans noastre care includ inline-block . Acest lucru face este să seteze afișarea span ceea ce înseamnă că elementul este tratat ca și alte elemente în inline , dar permite utilizarea proprietăților block .

Am adăugat o background-color de gri folosind bg-gray-200 și am creat o border-radius de bordură de 9999px folosind clasa rounded-full ; px3 adaugă umplutură pe x-axis în timp ce py-1 adaugă umplutură pe y-axis . text-sm este adăugat pentru a face font-size textului mică, iar text-gray-700 a fost folosit pentru a adăuga o nuanță închisă de culoare gri textului. Am continuat să adăugăm margin-right elementului span.

Dacă ați urmărit cu atenție, atunci ar trebui să aveți ceva similar:

Notă : Puteți înlocui imaginea cu o imagine la alegere (de preferință a dvs.) și, de asemenea, puteți personaliza conținutul în orice mod doriți.

Optimizare pentru productie

Când construiți pentru producție, este recomandabil să tăiați fișierele de compilare, în special fișierele css și js . Ambele fișiere au în prezent dimensiuni scandaloase.

Veți fi de acord cu mine că dimensiunea fișierului CSS este înfricoșătoare pentru producție, dar vestea bună este că există o cale de ieșire. Pentru a reduce dimensiunea CSS, rulați npm i @fullhuman/postcss-purgecss în terminalul dvs., apoi adăugați următorul cod în postcss.config.js :

 const tailwindcss = require("tailwindcss"); module.exports = { plugins: [ tailwindcss("./tailwind.js"), require("autoprefixer"), require("@fullhuman/postcss-purgecss")({ content: ["./src/**/*.js", "./public/index.html"], defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g)|| [], }), ], };

Pași de cod

• Primul pas pe care l-am făcut a fost solicitarea @fullhuman/postcss-purgecss , apoi l-am invocat ca funcție și am trecut într-o anumită configurație.
• Proprietatea content specifică căile către fișierele noastre șabloane și, în acest caz, fișierele șabloane sunt fișierele noastre js și html și, ca atare, am specificat căile.
• În continuare, trebuie să spunem purgecss cum să găsească clasele CSS neutilizate și să le eliminăm, facem acest lucru folosind cheia defaultExtractor și trecem o funcție care preia conținutul fișierului și returnează numele de clasă pe care le găsește în acel fișier folosind un regEx .
• Folosind regex, verificăm pentru a vedea dacă conținutul găsit se potrivește cu un model (clase cu majuscule, litere mici, numere, subliniere, două puncte și bare oblice) și dacă nu există o potrivire, returnăm o matrice goală.
• Acum, când rulăm npm run build în terminalul nostru, ar trebui să vedeți următoarele.

Acum puteți vedea că dimensiunea noastră CSS a fost redusă de la 186.67 KB la 1.02KB KB. Asta e mult dacă mă întrebi pe mine! Acum, vă puteți expedia aplicația în producție.

Concluzie

Sper că v-a plăcut acest tutorial. Desigur, puteți duce întotdeauna un pic mai departe făcând din aceasta o mică aplicație de profil care spune mult mai multe despre dvs. dincolo de puținele informații pe care le avem mai sus. De exemplu, puteți continua să partajați o list cu seturile de competențe pe care le aveți sau să adăugați un table la proiectele la care ați lucrat și, eventual, un formular de contact. Lăsați-vă creativitatea să curgă și vă rugăm să vă împărtășiți proiectele în secțiunea de comentarii de mai jos - mi-ar plăcea să văd ce ați venit!

• Repo de sprijin pentru acest articol este disponibil pe GitHub.

• Documentația Tailwind CSS (site-ul web oficial Tailwind CSS)

• „Tailwind CSS în JavaScript”, Christoph Benjamin Weber