Tailwind CSS je prvi uslužni CSS okvir koji programerima omogućuje dizajniranje prilagođenih web komponenti bez prelaska na CSS datoteku. U ovom vodiču naučit ćete kako instalirati Tailwind CSS u React i kako ga možete koristiti za izradu jednostavne React stranice.

Zašto koristiti Tailwind CSS?

Već ih ima puno CSS okviri koji pojednostavljuju način na koji programeri dizajniraju web stranice. Pa zašto biste trebali koristiti Tailwind CSS?

CSS okviri kao što su Bootstrap i Foundation su okviri s vlastitim mišljenjem, što znači da pružaju programerima unaprijed definirane komponente koje imaju zadane stilove. To ograničava i prilagodbu i kreativnost, a na kraju ćete dobiti web stranice koje izgledaju prilično općenito.

Tailwind CSS, međutim, je okvir koji je prvi uslužni program koji vam daje kreativnu kontrolu za stvaranje dinamičkih komponenti. I za razliku od Bootstrapa, možete jednostavno prilagoditi dizajn kako želite.

Još jedna prednost korištenja Tailwind CSS-a je da na kraju dobijete malu veličinu CSS paketa jer uklanja sve neiskorišteni CSS tijekom procesa izrade (koji se razlikuje od Bootstrapa, budući da uključuje sve CSS datoteke u izgraditi).

Saznajte više o razlike između Tailwind CSS-a i Bootstrapa iz našeg članka na tu temu.

Nedostaci korištenja Tailwind CSS-a

Tailwind CSS ima strmu krivulju učenja čak i za iskusne programere. Potrebno je neko vrijeme da naučite kako u potpunosti koristiti uslužne klase, a možda ćete se morati često pozivati ​​na dokumentaciju. Međutim, nakon upoznavanja s klasama, bit će vam lakše i brže u usporedbi s običnim CSS-om.

Većina programera voli slijediti načelo razdvajanja briga tako da su CSS i HTML datoteke napisane u različitim datotekama. S Tailwind CSS-om pišete CSS izravno u HTML oznaci - za neke je nedostatak.

Čak i uz ove nedostatke, Tailwind CSS je okvir koji biste trebali ozbiljno razmotriti ako ste već zadovoljni CSS-om i želite brže graditi dizajn.

Početak: Izradite React projekt

Pokrenite sljedeću naredbu u terminalu za skelu a Reagirati korištenje aplikacije stvori-reagiraj-aplikaciju.

npx create-react-app react-tailwind

stvori-reagiraj-aplikaciju pruža jednostavan način za izradu React aplikacije bez konfiguriranja alata za izradu kao što su webpack, babel ili linters. To znači da ćete završiti s radnim React okruženjem u roku od nekoliko minuta.

Gornja naredba stvara novu mapu pod nazivom reagovati-lećni vjetar. Dođite do mape i otvorite je pomoću željenog uređivača teksta.

cd react-tailwind

Zatim instalirajte Tailwind CSS i konfigurirajte ga za rad s React aplikacijom.

Koristite Tailwind CSS u Reactu

Instalirajte Tailwind CSS i njegove ovisnosti ovom naredbom:

npm install tailwindcss postcss autoprefixer

PostCSS koristi JavaScript dodatke kako bi CSS bio kompatibilan s većinom preglednika. Provjerava preglednik u kojem se aplikacija izvodi i određuje polifile potrebne da bi vaš CSS radio besprijekorno. Autoprefixer je PostCSS dodatak koji koristi vrijednosti iz caniuse.com za automatsko dodavanje prefiksa dobavljača u CSS pravila.

Inicijalizirajte Tailwind CSS

Pokrenite stražnji vjetar init naredba za generiranje Tailwind CSS zadanih konfiguracijskih datoteka.

npx tailwindcss init

Ovo stvara tailwind.config.js u korijenskoj mapi koja pohranjuje sve Tailwindove konfiguracijske datoteke i sadrži sljedeće:

module.exports = {
 sadržaj: [],
 tema: {
 proširiti: {},
 },
 dodaci: [],
}

Konfigurirajte puteve predloška

Tailwind CSS-u morate reći koje datoteke treba provjeriti da vidite koje se CSS klase koriste. To omogućuje Tailwindu da identificira i ukloni neiskorištene klase i stoga smanjuje veličinu generiranog CSS-a.

U tailwind.config.js, dodajte putove predloška ispod ključa sadržaja.

module.exports = {
 sadržaj: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 tema: {
 proširiti: {},
 },
 dodaci: [],
}

Ubacite Tailwind CSS u React

Sljedeći korak je uključivanje Tailwind CSS-a u aplikaciju pomoću @rećni vjetar direktive.

Izbrišite sve unutra index.css i dodajte sljedeće za uvoz osnovnih stilova, komponenti i uslužnih programa.

@tailwind baza;
@tailwind komponente;
@tailwind komunalne usluge;

Konačno, uvjerite se index.css se uvozi u index.js a Tailwind CSS će biti spreman za upotrebu.

Korištenje Tailwind CSS-a za stiliziranje React komponente

Napravit ćete jednostavnu web stranicu u nastavku i stilizirati je pomoću Tailwindovih uslužnih klasa.

Ova stranica sadrži dva glavna odjeljka: a navigacijska traka, i odjeljak heroja (koji ima naslov i gumb).

Da biste ilustrirali kako Tailwind CSS olakšava pisanje CSS-a, pokušajte oblikovati web stranicu pomoću običnog CSS-a i Tailwind CSS-a.

Započnite tako da promijenite App.js u src mapu za uklanjanje nepotrebnog koda.

uvoz './App.css'
funkcija App() {
 vratiti (



 );
}
izvoz zadane aplikacije;

Zatim dodajte sadržaj web stranice App.js.

uvoz "./App.css";
funkcija App() {
 vratiti (







 Tailwind CSS olakšava oblikovanje React komponenti!



Započnite






 );
}

Da biste koristili obični CSS, dodajte CSS u App.css.

nav {
 zaslon: flex;
 opravdati-sadržaj: prostor-između;
 padding: 16px 36px;
 boja: #000;
 box-shadow: 0px 2px 5px 0px rgba (168, 168, 168, 0,75);
}
.logo {
 veličina fonta: 18px;
 font-weight: bold;
}
ul {
 stil liste: nema;
 zaslon: inline-flex;
}
ul li {
 margin-lijevo: 16px;
 kursor: pokazivač;
}
.heroj {
 zaslon: flex;
 flex-direction: stupac;
 align-items: centar;
 margin-top: 64px;
}
h1 {
 veličina fonta: 36px;
 poravnavanje teksta: središte;
}
.btn {
 boja pozadine: #000000;
 boja: #fff;
 padding: 10px;
 širina: fit-content;
 margin-top: 36px;
}

Uz Tailwind CSS, ne morate pisati CSS pravila za svaki razred. Umjesto toga, koristite uslužne klase. To su klase s opsegom na jedno CSS svojstvo. Na primjer, ako želite stvoriti gumb s crnom pozadinom i bijelom bojom teksta, trebate upotrijebiti bg-crna i tekst-bijeli komunalne klase.

App.js trebao izgledati ovako.

funkcija App() {
 vratiti (







 Tailwind CSS olakšava oblikovanje React komponenti!




 Započnite







 );
}

Ne morate uvoziti App.css budući da su stilovi koje generira Tailwind CSS pohranjeni u index.css koju ste uvezli index.js ranije.

U usporedbi s običnim CSS-om, ovaj pristup rezultira manje koda koji je lako razumjeti.

Kod u stilu s Tailwind CSS

U ovom članku naučili ste o Tailwind CSS-u, njegovim prednostima, nedostacima i kako možete koristiti njegove uslužne klase u React aplikacijama. Osim klasa, Tailwind CSS nudi i druge dodatne značajke uključujući mogućnost stvaranja responzivnih izgleda i komponenti za višekratnu upotrebu.

No, kao što smo ranije spomenuli, Tailwind je daleko od jedinog CSS okvira na tržištu. Što ćete koristiti za svoj sljedeći projekt?

Tailwind CSS vs. Bootstrap: koji je bolji okvir?

Prilikom odabira CSS okvira važno je pronaći onaj koji zadovoljava vaše zahtjeve.

Pročitajte dalje

O autoru