Ja vēlaties veidot savas lietotnes ar ātru, elastīgu un uzticamu sistēmu, Tailwind CSS ir lieliska iespēja. Tailwind ir CSS sistēma, kas palīdz izstrādāt pielāgotus tīmekļa komponentus. Varat izstrādāt komponentus, nepārslēdzoties starp HTML un CSS failiem.

Atšķirībā no Bootstrap, Tailwind nav iepriekš definētu klašu. Tā vietā jūs varat pielāgot savu. Izmantojot Tailwind, varat izveidot sarežģītus komponentus ar primitīvām utilītprogrammām, funkcijām un direktīvām.

Uzziniet, kā instalēt un izmantot Tailwind, lai izveidotu pārsteidzošas lietotāja saskarnes savos Next.js projektos.

Instalējiet Tailwind CSS vietnē Next.js

Sāciet darbu, instalējot Tailwind lietojumprogrammā Next.js. Process ir līdzīgs Tailwind instalēšana React lietotnē, ar nelielu atšķirību konfigurācijas procesā.

Dodieties uz Tailwind CSS instalēšana lappuse. Pēc tam dodieties uz Pamata rokasgrāmatas sadaļu un atlasiet

Next.js. Šajā sadaļā ir ietverti visi norādījumi, kas nepieciešami Tailwind iestatīšanai savā Next.js projektā.

Lai instalētu Tailwind, izmantojot npm, JavaScript pakotņu pārvaldnieks, palaidiet šīs divas termināļa komandas:

npm instalēt -D tailwindcss postcss autoprefikser
npx tailwindcss init -p

Šīs komandas izveido divus konfigurācijas failus ar nosaukumu tailwind.config.js un postcss.config.js saknes projekta mapē. Šie faili norāda, ka TailwindCSS tika veiksmīgi instalēts. Varat arī instalēt Tailwind CSS, izmantojot Tailwind CLI vai kā PostCSS spraudni.

Konfigurēt veidnes

Pēc instalēšanas jums ir jākonfigurē lietotnes konfigurācijas faila instalēšanas rokasgrāmatā norādītie veidņu ceļi. Pievienojiet tālāk norādīto kodu tailwind.config.js failu:

/** @tips {import('tailwindcss').Config}*/
modulis.exports = {
 saturs: [ 
"./app/**/*.{js, ts, jsx, tsx}",
"./pages/**/*.{js, ts, jsx, tsx}",
"./components/**/*.{js, ts, jsx, tsx}",
// Vai, ja tiek izmantots `src' direktorijs: 
"./src/**/*.{js, ts, jsx, tsx}",
 ],
 tēma: { 
 pagarināt: {},
 },
 spraudņi: [],
}

Pievienojiet Tailwind direktīvu lietotnei

Pēc tam pievienojiet tālāk norādītās Tailwind direktīvas savam lietotnes CSS failam. Šis ir fails ar nosaukumu globālais.css. Izdzēsiet faila global.css saturu un pievienojiet Tailwind direktīvas.

@tailwind bāze;
@tailwind sastāvdaļas;
@tailwind utilities;

Palaidiet veidošanas procesu

Tagad terminālī palaidiet CLI rīku ar šādu komandu:

npm palaist dev

Šī komanda skenē jūsu klašu veidņu failus un izveido jūsu CSS. Tas atvērs portu, lai skatītu pārlūkprogrammu.

Tagad, ja dodaties uz serveri vietnē http://localhost: 3000 jūs redzēsit savu lietotni. Jums vajadzētu pamanīt nelielas izmaiņas saturā. Tas norāda, ka instalēšanas process ir veiksmīgs un Tailwind CSS ir tiešraidē.

Izmantojiet Tailwind projektā

Pēc tam pārbaudīsim Tailwind CSS funkcijas, savam projektam piemērojot klases. Piemēram, jums ir lietotne ar tekstu "Hello Tailwind". Jūs vēlaties tai piešķirt sarkanu krāsu ar gaiši zilu fonu.

Izveidot a Sākums.tsx failu, pēc tam pievienojiet šādu kodu:

eksportētnoklusējumafunkcijuMājas() {
atgriezties (
"bg-blue-300">
"text-red-900">Sveiki Tailwind CSS</h1>
 </body>
 );
} 

Tagad, pārejot uz pārlūkprogrammu, teksts ir mainīts uz sarkanu, un fons ir zils.

Varat izpētīt citas Tailwind CSS funkcijas, lai veidotu citus savas lietotnes komponentus. Nosacījumu modifikatori ļauj izveidot reaktīvus stāvokļus, piemēram, virzīt kursoru un fokusēt. Varat arī pielāgot savas lapas tumšajiem un gaišajiem režīmiem atbilstoši lietotāja vēlmēm.

Tailwind CSS izmantošanas priekšrocības

Tailwind CSS, ko izveidoja Adam Wathan 2017. gadā, daudzējādā ziņā atšķiras no citām CSS bibliotēkām. Tam ir nulle darbības laiks, tāpēc tas ir zibens ātrs. Un ir viegli uzstādīt. Tailwind skenē visus HTML failus un JavaScript komponentus, lai atrastu klašu nosaukumus jūsu lietotnē. Pēc tam tas ģenerē atbilstošos stilus, kas veido elementus.

Tailwind CSS ļauj izstrādāt sarežģītas sastāvdaļas no primitīvām utilītprogrammām. Varat atkārtoti izmantot stilus dažādos komponentos un izmantot modifikatorus, lai veidotu adaptīvās lietotāja saskarnes. Veiciet šeit norādītās darbības, lai uzzinātu, kā instalēt un izmantot Tailwind CSS, lai pielāgotu lietotnes, kas atbilst jūsu zīmolam.