Kui soovite oma rakendusi kujundada kiire, paindliku ja usaldusväärse raamistikuga, on Tailwind CSS suurepärane võimalus. Tailwind on CSS-i raamistik, mis aitab teil kujundada kohandatud veebikomponente. Saate kujundada komponente, ilma et peaksite HTML- ja CSS-failide vahel edasi-tagasi lülituma.

Erinevalt Bootstrapist pole Tailwindil eelnevalt määratletud klasse. Selle asemel saate kohandada oma. Tailwindi abil saate luua keerukaid komponente primitiivsete utiliitide, funktsioonide ja direktiividega.

Siit saate teada, kuidas installida ja kasutada Tailwindi, et luua oma Next.js projektides hämmastavaid kasutajaliideseid.

Installige faili Next.js Tailwind CSS

Alustamiseks installige Tailwind rakendusse Next.js. Protsess on sarnane Tailwindi installimine Reacti rakendusse, konfiguratsiooniprotsessis on väike erinevus.

Mine lehele Tailwind CSS-i installimine lehel. Seejärel minge lehele

Raamjuhendid jaotis ja valige Next.js. See jaotis sisaldab kõiki juhiseid, mida vajate Tailwindi seadistamiseks projektis Next.js.

Tailwindi installimiseks kaudu npm, JavaScripti paketihaldur, käivitage need kaks terminali käsku:

npm install -D tailwindcss postcss automaatprefikser
npx tailwindcss init -p

Need käsud loovad kaks nimega konfiguratsioonifaili tailwind.config.js ja postcss.config.js juurprojekti kaustas. Need failid näitavad, et TailwindCSS installiti edukalt. Tailwind CSS-i saate installida ka Tailwind CLI kaudu või PostCSS-i pistikprogrammina.

Mallide konfigureerimine

Pärast installimist peate konfigureerima oma rakenduse konfiguratsioonifaili installijuhendis toodud malliteed. Lisage sellele järgmine kood tailwind.config.js faili:

/** @tüüp {import('tailwindcss').Config}*/
moodul.exports = {
 sisu: [ 
"./app/**/*.{js, ts, jsx, tsx}",
"./pages/**/*.{js, ts, jsx, tsx}",
"./components/**/*.{js, ts, jsx, tsx}",
// Või kui kasutate kataloogi "src": 
"./src/**/*.{js, ts, jsx, tsx}",
 ],
 teema: { 
 pikendada: {},
 },
 pluginad: [],
}

Lisage rakendusele Tailwindi direktiiv

Järgmisena lisage oma rakenduse CSS-faili järgmised Tailwindi juhised. See on faili nimi global.css. Peaksite faili global.css sisu kustutama ja lisama Tailwindi direktiivid.

@tailwind base;
@tailwind komponendid;
@tailwind kommunaalteenused;

Käivitage ehitusprotsess

Nüüd käivitage terminalis CLI tööriist järgmise käsuga:

npm käivita dev

See käsk skannib teie mallifaile klasside jaoks ja loob teie CSS-i. See avab pordi, kus saate brauserit vaadata.

Nüüd, kui navigeerite serverisse aadressil http://localhost: 3000 näete oma rakendust. Peaksite märkama väikest sisu muutust. See näitab, et installiprotsess on edukas ja Tailwind CSS on aktiivne.

Kasutage projektis Tailwindi

Järgmisena testime Tailwindi CSS-i funktsioone, rakendades oma projektile klasse. Näiteks on teil rakendus tekstiga "Tere Tailwind". Soovite anda sellele helesinise taustaga punase värvi.

Loo Home.tsx faili ja lisage järgmine kood:

eksportidavaikimisifunktsiooniKodu() {
tagasi (
"bg-blue-300">
"text-red-900">Tere Tailwind CSS</h1>
 </body>
 );
} 

Nüüd, kui navigeerite brauserisse, näete, et tekst on muutunud punaseks ja taust on sinine.

Saate uurida teisi Tailwindi CSS-i funktsioone, et kujundada oma rakenduse muid komponente. Tingimuslikud modifikaatorid võimaldavad teil luua reaktiivseid olekuid, nagu hõljutamine ja teravustamine. Samuti saate kohandada oma lehti vastavalt kasutaja eelistustele tumedatele ja heledatele režiimidele.

Tailwind CSS-i kasutamise eelised

Adam Wathani 2017. aastal loodud Tailwind CSS erineb teistest CSS-i teekidest mitmel viisil. Sellel on null tööaega, mistõttu on see välkkiire. Ja seda on lihtne paigaldada. Tailwind otsib teie rakenduses kõiki HTML-faile ja JavaScripti komponente klassinimede leidmiseks. Seejärel genereerib see elemente kujundavad vastavad stiilid.

Tailwind CSS võimaldab teil kujundada keerukaid komponente primitiivsetest utiliitidest. Saate stiile komponentide lõikes uuesti kasutada ja reageerivate kasutajaliideste stiilimiseks kasutada modifikaatoreid. Siit saate teada, kuidas installida ja kasutada Tailwind CSS-i, et kohandada rakendusi, mis vastavad teie kaubamärgile.