Če želite svoje aplikacije oblikovati s hitrim, prilagodljivim in zanesljivim ogrodjem, je Tailwind CSS odlična možnost. Tailwind je ogrodje CSS, ki vam pomaga oblikovati spletne komponente po meri. Komponente lahko oblikujete, ne da bi morali preklapljati med datotekami HTML in CSS.

Za razliko od Bootstrapa Tailwind nima vnaprej določenih razredov. Namesto tega lahko prilagodite svoje. S Tailwindom lahko sestavite kompleksne komponente s primitivnimi pripomočki, funkcijami in direktivami.

Naučite se namestiti in uporabljati Tailwind za ustvarjanje osupljivih uporabniških vmesnikov v vaših projektih Next.js.

Namestite Tailwind CSS v Next.js

Začnite z namestitvijo Tailwind v aplikacijo Next.js. Postopek je podoben namestitev Tailwind v aplikaciji React, z majhno razliko v postopku konfiguracije.

Pojdi na Tailwind namestitev CSS strani. Nato pojdite na Okvirni vodniki in izberite

Next.js. Ta razdelek vsebuje vsa navodila, ki jih potrebujete za nastavitev Tailwinda v projektu Next.js.

Za namestitev Tailwind prek npm, upravitelj paketov JavaScript, zaženite ta dva terminalska ukaza:

npm namestite -D tailwindcss samodejna predpona postcss
npx tailwindcss init -p

Ti ukazi ustvarijo dve konfiguracijski datoteki z imenom tailwind.config.js in postcss.config.js v korenski mapi projekta. Te datoteke kažejo, da je bil TailwindCSS uspešno nameščen. Tailwind CSS lahko namestite tudi prek Tailwind CLI ali kot vtičnik PostCSS.

Konfigurirajte predloge

Po namestitvi morate v konfiguracijski datoteki aplikacije konfigurirati poti predlog, ki so navedene v vodniku za namestitev. Dodajte naslednjo kodo v datoteka tailwind.config.js:

/** @vrsta {import('tailwindcss').Config}*/
modul.exports = {
 vsebina: [ 
"./app/**/*.{js, ts, jsx, tsx}",
"./pages/**/*.{js, ts, jsx, tsx}",
"./components/**/*.{js, ts, jsx, tsx}",
// Ali če uporabljate imenik `src`: 
"./src/**/*.{js, ts, jsx, tsx}",
 ],
 tema: { 
 razširi: {},
 },
 vtičniki: [],
}

V aplikacijo dodajte Direktivo za zadnji veter

Nato v datoteko CSS aplikacije dodajte naslednje direktive Tailwind. To je datoteka z imenom global.css. Vsebino datoteke global.css morate izbrisati in dodati direktive Tailwind.

podstavek @tailwind;
komponente @tailwind;
pripomočki @tailwind;

Zaženite postopek gradnje

Zdaj na terminalu zaženite orodje CLI z naslednjim ukazom:

npm run dev

Ta ukaz skenira vaše datoteke predlog za razrede in zgradi vaš CSS. Odpre se vam vrata za ogled brskalnika.

Zdaj, če se pomaknete do strežnika na http://localhost: 3000 videli boste svojo aplikacijo. Opaziti bi morali rahlo spremembo vsebine. To pomeni, da je bil postopek namestitve uspešen in da Tailwind CSS deluje.

Uporabite Tailwind v projektu

Nato preizkusimo funkcije CSS Tailwind z uporabo razredov v vašem projektu. Na primer, imate aplikacijo z besedilom "Hello Tailwind". Želite mu dati rdečo barvo s svetlo modrim ozadjem.

Ustvariti Domov.tsx nato dodajte naslednjo kodo:

izvozprivzetofunkcijodomov() {
vrnitev (
"bg-modra-300">
'text-red-900'>Pozdravljeni Tailwind CSS</h1>
 </body>
 );
} 

Zdaj, ko se pomaknete do brskalnika, boste videli besedilo spremenjeno v rdeče, ozadje pa modro.

Za oblikovanje drugih komponent vaše aplikacije lahko raziščete druge funkcije Tailwind CSS. Pogojni modifikatorji vam omogočajo ustvarjanje reaktivnih stanj, kot sta lebdenje in fokus. Svoje strani lahko tudi prilagodite temnim in svetlim načinom glede na želje uporabnika.

Prednosti uporabe Tailwind CSS

Tailwind CSS, ki ga je leta 2017 izdelal Adam Wathan, se v mnogih pogledih razlikuje od drugih knjižnic CSS. Ima nič časa delovanja, zaradi česar je bliskovito hiter. In je enostaven za namestitev. Tailwind skenira vse datoteke HTML in komponente JavaScript za imena razredov v vaši aplikaciji. Nato ustvari ustrezne sloge, ki oblikujejo elemente.

Tailwind CSS vam omogoča oblikovanje kompleksnih komponent iz primitivnih pripomočkov. Znova lahko uporabite sloge med komponentami in uporabite modifikatorje za oblikovanje odzivnih uporabniških vmesnikov. S temi koraki se naučite, kako namestiti in uporabljati Tailwind CSS za prilagajanje aplikacij, ki ustrezajo vaši blagovni znamki.