Hvis du vil style dine apps med en hurtig, fleksibel og pålidelig ramme, er Tailwind CSS en god mulighed. Tailwind er en CSS-ramme, der hjælper dig med at designe tilpassede webkomponenter. Du kan designe komponenter uden at skulle skifte frem og tilbage mellem HTML- og CSS-filer.

I modsætning til Bootstrap har Tailwind ikke foruddefinerede klasser. I stedet kan du skræddersy din egen. Med Tailwind kan du bygge komplekse komponenter med primitive hjælpeprogrammer, funktioner og direktiver.

Lær, hvordan du installerer og bruger Tailwind til at skabe fantastiske brugergrænseflader i dine Next.js-projekter.

Installer Tailwind CSS i Next.js

Kom i gang ved at installere Tailwind i en Next.js-applikation. Processen ligner installation af Tailwind i en React-app, med en lille forskel i konfigurationsprocessen.

Gå til Tailwind CSS installation side. Gå derefter til Rammevejledninger sektion og vælg

Next.js. Dette afsnit indeholder alle de instruktioner, du skal bruge for at konfigurere Tailwind i dit Next.js-projekt.

For at installere Tailwind via npm, JavaScript-pakkemanageren, kør disse to terminalkommandoer:

npm install -D tailwindcss postcss autoprefixer
npx medvindcss init -s

Disse kommandoer opretter to navngivne konfigurationsfiler tailwind.config.js og postcss.config.js i rodprojektmappen. Disse filer indikerer, at TailwindCSS blev installeret. Du kan også installere Tailwind CSS gennem Tailwind CLI eller som et PostCSS plugin.

Konfigurer skabeloner

Efter installationen skal du konfigurere skabelonstierne i installationsvejledningen til din app-konfigurationsfil. Tilføj følgende kode til tailwind.config.js fil:

/** @type {import('tailwindcss').Config}*/
modul.exports = {
 indhold: [ 
"./app/**/*.{js, ts, jsx, tsx}",
"./pages/**/*.{js, ts, jsx, tsx}",
"./components/**/*.{js, ts, jsx, tsx}",
// Eller hvis du bruger mappen `src`: 
"./src/**/*.{js, ts, jsx, tsx}",
 ],
 tema: { 
 forlænge: {},
 },
 plugins: [],
}

Føj medvindsdirektiv til app

Tilføj derefter følgende Tailwind-direktiver til din App CSS-fil. Dette er filen, der hedder global.css. Du bør slette indholdet af global.css-filen og tilføje Tailwind-direktiverne.

@medvindsbase;
@tailwind komponenter;
@tailwind hjælpeprogrammer;

Kør byggeprocessen

Kør nu CLI-værktøjet på terminalen med følgende kommando:

npm køre dev

Denne kommando scanner dine skabelonfiler for klasser og bygger din CSS. Det åbner en port, så du kan se browseren.

Nu, hvis du navigerer til serveren kl http://localhost: 3000 du vil se din app. Du bør bemærke en lille ændring i indholdet. Dette indikerer, at installationsprocessen er en succes, og Tailwind CSS er live.

Brug medvind i projektet

Lad os derefter teste Tailwind CSS-funktioner ved at anvende klasser på dit projekt. For eksempel har du en app med teksten "Hej medvind". Du vil give den en rød farve med en lyseblå baggrund.

Lave en Home.tsx fil og tilføj derefter følgende kode:

eksportStandardfungereHjem() {
Vend tilbage (
"bg-blue-300">
'tekst-rød-900'>Hej Tailwind CSS</h1>
 </body>
 );
} 

Nu, når du navigerer til browseren, vil du se teksten ændret til rød, og baggrunden er blå.

Du kan udforske andre Tailwind CSS-funktioner for at style andre komponenter i din app. De betingede modifikatorer giver dig mulighed for at oprette reaktive tilstande som hover og fokus. Du kan også tilpasse dine sider til mørke og lyse tilstande i henhold til brugerens præference.

Fordele ved at bruge Tailwind CSS

Lavet af Adam Wathan i 2017, Tailwind CSS adskiller sig fra andre CSS-biblioteker på mange måder. Den har ingen køretid, hvilket gør den lynhurtig. Og er nem at installere. Tailwind scanner alle HTML-filer og JavaScript-komponenter for klassenavne på din app. Det genererer derefter de tilsvarende stilarter, der designer elementerne.

Tailwind CSS giver dig mulighed for at designe komplekse komponenter fra primitive hjælpeprogrammer. Du kan genbruge stilarter på tværs af komponenter og bruge modifikatorer til at style responsive brugergrænseflader. Brug trinene her for at lære, hvordan du installerer og bruger Tailwind CSS til at tilpasse apps, der matcher dit brand.