Tailwind CSS lengva įdiegti ir naudoti su Next.js, tik pirmiausia įsitikinkite, kad jį tinkamai nustatėte.

Jei norite sukurti savo programų stilių naudodami greitą, lanksčią ir patikimą sistemą, „Tailwind CSS“ yra puiki galimybė. Tailwind yra CSS sistema, padedanti kurti pasirinktinius žiniatinklio komponentus. Galite kurti komponentus neperjungdami pirmyn ir atgal HTML ir CSS failų.

Skirtingai nei „Bootstrap“, „Tailwind“ neturi iš anksto nustatytų klasių. Vietoj to, jūs galite tinkinti savo. Naudodami Tailwind galite kurti sudėtingus komponentus su primityviomis programomis, funkcijomis ir direktyvomis.

Sužinokite, kaip įdiegti ir naudoti „Tailwind“, kad sukurtumėte nuostabias vartotojo sąsajas savo Next.js projektuose.

Įdiekite Tailwind CSS į Next.js

Pradėkite įdiegę Tailwind programoje Next.js. Procesas panašus į „Tailwind“ įdiegimas „React“ programoje, šiek tiek skiriasi konfigūravimo procesas.

Eikite į Tailwind CSS diegimas puslapį. Tada eikite į Pagrindų vadovai skyrių ir pasirinkite

instagram viewer
Next.js. Šiame skyriuje pateikiamos visos instrukcijos, kurių reikia norint nustatyti „Tailwind“ savo Next.js projekte.

Norėdami įdiegti Tailwind per npm, „JavaScript“ paketų tvarkyklė, paleiskite šias dvi terminalo komandas:

npm įdiegti -D tailwindcss postcss automatinis prefiksatorius
npx tailwindcss init -p

Šios komandos sukuria du konfigūracijos failus, pavadintus tailwind.config.js ir postcss.config.js šakniniame projekto aplanke. Šie failai rodo, kad TailwindCSS buvo sėkmingai įdiegtas. Taip pat galite įdiegti „Tailwind CSS“ naudodami „Tailwind CLI“ arba kaip „PostCSS“ papildinį.

Konfigūruoti šablonus

Įdiegę turite sukonfigūruoti programos konfigūracijos failo diegimo vadove pateiktus šablonų kelius. Pridėkite šį kodą prie tailwind.config.js failą:

/** @tipas {import('tailwindcss').Config}*/
modulis.exports = {
 turinys: [ 
„./app/**/*.{js, ts, jsx, tsx}“,
"./pages/**/*.{js, ts, jsx, tsx}",
"./components/**/*.{js, ts, jsx, tsx}",
// Arba jei naudojate „src“ katalogą: 
„./src/**/*.{js, ts, jsx, tsx}“,
 ],
 tema: { 
 išplėsti: {},
 },
 papildiniai: [],
}

Pridėkite Tailwind direktyvą prie programos

Tada prie programos CSS failo pridėkite šias Tailwind direktyvas. Tai failas pavadintas global.css. Turėtumėte ištrinti global.css failo turinį ir pridėti Tailwind direktyvas.

@tailwind bazė;
@tailwind komponentai;
@tailwind komunalinės paslaugos;

Vykdykite kūrimo procesą

Dabar terminale paleiskite CLI įrankį naudodami šią komandą:

npm paleisti dev

Ši komanda nuskaito jūsų klasių šablonų failus ir sukuria jūsų CSS. Bus atidarytas prievadas, kuriame galėsite peržiūrėti naršyklę.

Dabar, jei naršote į serverį adresu http://localhost: 3000 pamatysite savo programą. Turėtumėte pastebėti nedidelį turinio pasikeitimą. Tai rodo, kad diegimo procesas buvo sėkmingas, o „Tailwind CSS“ veikia.

Projekte naudokite Tailwind

Tada išbandykime „Tailwind CSS“ funkcijas pritaikydami klases savo projektui. Pavyzdžiui, turite programėlę su tekstu „Hello Tailwind“. Norite suteikti jam raudoną spalvą su šviesiai mėlynu fonu.

Sukurti Home.tsx failą, tada pridėkite šį kodą:

eksportuotinumatytasfunkcijaNamai() {
grąžinti (
"bg-blue-300">
"text-red-900">Sveiki Tailwind CSS</h1>
 </body>
 );
}

Dabar, kai naršysite naršyklėje, pamatysite, kad tekstas pakeistas į raudoną, o fonas yra mėlynas.

Galite tyrinėti kitas Tailwind CSS funkcijas, kad sukurtumėte kitų programos komponentų stilių. Sąlyginiai modifikatoriai leidžia sukurti reaktyvias būsenas, tokias kaip užvedimas ir fokusavimas. Taip pat galite tinkinti savo puslapius tamsiems ir šviesiems režimams pagal vartotojo pageidavimus.

Tailwind CSS naudojimo pranašumai

2017 m. Adamo Wathano sukurta „Tailwind CSS“ daugeliu atžvilgių skiriasi nuo kitų CSS bibliotekų. Jo veikimo laikas yra nulinis, todėl jis veikia žaibiškai. Ir lengva montuoti. „Tailwind“ nuskaito visus HTML failus ir „JavaScript“ komponentus, kad nustatytų klasių pavadinimus jūsų programoje. Tada sukuriami atitinkami stiliai, kuriais kuriami elementai.

Tailwind CSS leidžia kurti sudėtingus komponentus iš primityvių paslaugų. Galite pakartotinai naudoti stilius visuose komponentuose ir naudoti modifikatorius, kad sukurtumėte interaktyvių vartotojo sąsajų stilių. Atlikite čia nurodytus veiksmus, kad sužinotumėte, kaip įdiegti ir naudoti Tailwind CSS, kad tinkintumėte programas, atitinkančias jūsų prekės ženklą.