Dacă doriți să vă stilați aplicațiile cu un cadru rapid, flexibil și de încredere, Tailwind CSS este o opțiune excelentă. Tailwind este un cadru CSS care vă ajută să proiectați componente web personalizate. Puteți proiecta componente fără a fi nevoie să comutați înainte și înapoi între fișierele HTML și CSS.

Spre deosebire de Bootstrap, Tailwind nu are clase predefinite. În schimb, poți să-ți personalizezi pe al tău. Cu Tailwind, puteți construi componente complexe cu utilități, funcții și directive primitive.

Aflați cum să instalați și să utilizați Tailwind pentru a crea interfețe de utilizator uimitoare în proiectele dvs. Next.js.

Instalați Tailwind CSS în Next.js

Începeți prin a instala Tailwind într-o aplicație Next.js. Procesul este similar cu instalarea Tailwind într-o aplicație React, cu o mică diferență în procesul de configurare.

Du-te la Instalare CSS Tailwind

pagină. Apoi du-te la Ghiduri-cadru secțiune și selectați Next.js. Această secțiune conține toate instrucțiunile de care aveți nevoie pentru a configura Tailwind în proiectul dvs. Next.js.

Pentru a instala Tailwind prin npm, managerul de pachete JavaScript, rulați aceste două comenzi de terminal:

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

Aceste comenzi creează două fișiere de configurare numite tailwind.config.js și postcss.config.js în folderul rădăcină al proiectului. Aceste fișiere indică faptul că TailwindCSS a fost instalat cu succes. De asemenea, puteți instala Tailwind CSS prin intermediul CLI Tailwind sau ca plugin PostCSS.

Configurați șabloane

După instalare, trebuie să configurați căile șablonului furnizate în ghidul de instalare pentru fișierul de configurare a aplicației. Adăugați următorul cod la fișierul tailwind.config.js:

/** @tip {import('tailwindcss').Config}*/
modul.exports = {
 continut: [ 
„./app/**/*.{js, ts, jsx, tsx}”,
„./pages/**/*.{js, ts, jsx, tsx}”,
„./components/**/*.{js, ts, jsx, tsx}”,
// Sau dacă folosiți directorul `src`: 
„./src/**/*.{js, ts, jsx, tsx}”,
 ],
 tema: { 
 extinde: {},
 },
 pluginuri: [],
}

Adăugați directivă Tailwind în aplicație

Apoi, adăugați următoarele directive Tailwind în fișierul CSS al aplicației. Acesta este fișierul numit global.css. Ar trebui să ștergeți conținutul fișierului global.css și să adăugați directivele Tailwind.

@baza vantului de coada;
componente @tailwind;
utilități @tailwind;

Rulați procesul de construire

Acum, pe terminal, rulați instrumentul CLI cu următoarea comandă:

npm run dev

Această comandă scanează fișierele șablon pentru clase și construiește CSS. Se va deschide un port pentru a vedea browserul.

Acum, dacă navigați la server la http://localhost: 3000 veți vedea aplicația dvs. Ar trebui să observați o ușoară modificare a conținutului. Acest lucru indică faptul că procesul de instalare este un succes, iar Tailwind CSS este activ.

Utilizați Tailwind în proiect

Apoi, să testăm funcțiile Tailwind CSS aplicând clase la proiectul tău. De exemplu, aveți o aplicație cu textul „Hello Tailwind”. Vrei să-i dai o culoare roșie cu un fundal albastru deschis.

Creeaza o Acasă.tsx fișier apoi adăugați următorul cod:

exportMod implicitfuncţieAcasă() {
întoarcere (
„bg-blue-300”>
„text-red-900”>Bună ziua Tailwind CSS</h1>
 </body>
 );
} 

Acum, când navigați la browser, veți vedea textul schimbat în roșu, iar fundalul este albastru.

Puteți explora alte funcții CSS Tailwind pentru a stila alte componente ale aplicației dvs. Modificatorii condiționali vă permit să creați stări reactive, cum ar fi hover și focalizare. De asemenea, vă puteți personaliza paginile în modurile întunecate și deschise, în funcție de preferințele utilizatorului.

Avantajele utilizării CSS Tailwind

Realizat de Adam Wathan în 2017, Tailwind CSS diferă de alte biblioteci CSS în multe privințe. Are un timp de rulare zero, ceea ce îl face fulgerător. Și este ușor de instalat. Tailwind scanează toate fișierele HTML și componentele JavaScript pentru numele claselor din aplicația dvs. Apoi generează stilurile corespunzătoare care proiectează elementele.

Tailwind CSS vă permite să proiectați componente complexe din utilități primitive. Puteți reutiliza stiluri între componente și puteți utiliza modificatori pentru a stila interfețele de utilizare receptive. Utilizați pașii de aici pentru a afla cum să instalați și să utilizați Tailwind CSS pentru a personaliza aplicațiile care se potrivesc cu marca dvs.