Ako želite stilizirati svoje aplikacije s brzim, fleksibilnim i pouzdanim okvirom, Tailwind CSS je izvrsna opcija. Tailwind je CSS okvir koji vam pomaže dizajnirati prilagođene web komponente. Možete dizajnirati komponente bez potrebe za prebacivanjem između HTML i CSS datoteka.

Za razliku od Bootstrapa, Tailwind nema unaprijed definirane klase. Umjesto toga, možete prilagoditi svoje. S Tailwindom možete graditi složene komponente s primitivnim uslužnim programima, funkcijama i direktivama.

Naučite kako instalirati i koristiti Tailwind za stvaranje nevjerojatnih korisničkih sučelja u vašim Next.js projektima.

Instalirajte Tailwind CSS u Next.js

Započnite instaliranjem Tailwinda u Next.js aplikaciji. Proces je sličan instaliranje Tailwinda u React aplikaciju, s malom razlikom u procesu konfiguracije.

Idi na Tailwind CSS instalacija stranica. Zatim idite na Vodiči za okvire odjeljak i odaberite

Dalje.js. Ovaj odjeljak sadrži sve upute koje su vam potrebne za postavljanje Tailwinda u vašem projektu Next.js.

Da biste instalirali Tailwind putem npm, JavaScript upravitelj paketa, pokrenite ove dvije naredbe terminala:

npm instaliraj -D tailwindcss postcss autoprefiks
npx tailwindcss init -p

Ove naredbe stvaraju dvije konfiguracijske datoteke pod nazivom tailwind.config.js i postcss.config.js u korijenskoj mapi projekta. Ove datoteke pokazuju da je TailwindCSS uspješno instaliran. Također možete instalirati Tailwind CSS putem Tailwind CLI ili kao PostCSS dodatak.

Konfigurirajte predloške

Nakon instalacije morate konfigurirati staze predložaka navedene u vodiču za instalaciju do konfiguracijske datoteke vaše aplikacije. Dodajte sljedeći kod u tailwind.config.js datoteku:

/** @tip {import('tailwindcss').Config}*/
modul.izvoz = {
 sadržaj: [ 
"./app/**/*.{js, ts, jsx, tsx}",
"./stranice/**/*.{js, ts, jsx, tsx}",
"./components/**/*.{js, ts, jsx, tsx}",
// Ili ako koristite direktorij `src`: 
"./src/**/*.{js, ts, jsx, tsx}",
 ],
 tema: { 
 proširiti: {},
 },
 dodaci: [],
}

Dodajte Tailwind Direktivu u aplikaciju

Zatim dodajte sljedeće Tailwind direktive u svoju CSS datoteku aplikacije. Ovo je datoteka pod nazivom global.css. Trebali biste izbrisati sadržaj global.css datoteke i dodati Tailwind direktive.

@baza stražnjeg vjetra;
komponente @stražnog vjetra;
@tailwind pomoćni programi;

Pokreni proces izgradnje

Sada na terminalu pokrenite CLI alat sljedećom naredbom:

npm run dev

Ova naredba skenira vaše datoteke predložaka za klase i gradi vaš CSS. Otvorit će vam priključak za pregled preglednika.

Sada, ako prijeđete na poslužitelj na http://localhost: 3000 vidjet ćete svoju aplikaciju. Trebali biste primijetiti malu promjenu u sadržaju. To znači da je postupak instalacije bio uspješan i da je Tailwind CSS aktivan.

Koristite Tailwind u projektu

Zatim, testirajmo Tailwind CSS značajke primjenom klasa na vaš projekt. Na primjer, imate aplikaciju s tekstom "Hello Tailwind". Želite mu dati crvenu boju sa svijetloplavom pozadinom.

Stvoriti Dom.tsx datoteku zatim dodajte sljedeći kod:

izvozzadanofunkcijaDom() {
povratak (
"bg-plavi-300">
'text-red-900'>Pozdrav Tailwind CSS</h1>
 </body>
 );
} 

Sada, kada otvorite preglednik, vidjet ćete da je tekst promijenjen u crvenu, a pozadina je plava.

Možete istražiti druge Tailwind CSS značajke da biste stilizirali druge komponente svoje aplikacije. Uvjetni modifikatori omogućuju vam stvaranje reaktivnih stanja poput lebdenja i fokusa. Također možete prilagoditi svoje stranice na tamne i svijetle načine rada prema želji korisnika.

Prednosti korištenja Tailwind CSS-a

Napravio ga je Adam Wathan 2017., Tailwind CSS se na mnogo načina razlikuje od ostalih CSS biblioteka. Ima nula vremena rada, što ga čini munjevito brzim. I lako se postavlja. Tailwind skenira sve HTML datoteke i JavaScript komponente za nazive klasa u vašoj aplikaciji. Zatim generira odgovarajuće stilove koji dizajniraju elemente.

Tailwind CSS vam omogućuje da dizajnirate složene komponente iz primitivnih pomoćnih programa. Možete ponovno koristiti stilove u svim komponentama i koristiti modifikatore za stiliziranje responzivnih korisničkih sučelja. Upotrijebite korake ovdje da naučite kako instalirati i koristiti Tailwind CSS za prilagodbu aplikacija koje odgovaraju vašoj robnoj marki.