Hvis du vil style appene dine med et raskt, fleksibelt og pålitelig rammeverk, er Tailwind CSS et flott alternativ. Tailwind er et CSS-rammeverk som hjelper deg med å designe tilpassede webkomponenter. Du kan designe komponenter uten å måtte bytte frem og tilbake mellom HTML- og CSS-filer.

I motsetning til Bootstrap har ikke Tailwind forhåndsdefinerte klasser. I stedet kan du tilpasse din egen. Med Tailwind kan du bygge komplekse komponenter med primitive verktøy, funksjoner og direktiver.

Lær hvordan du installerer og bruker Tailwind til å lage fantastiske brukergrensesnitt i Next.js-prosjektene dine.

Installer Tailwind CSS i Next.js

Kom i gang ved å installere Tailwind i en Next.js-applikasjon. Prosessen ligner på installere Tailwind i en React-app, med en liten forskjell i konfigurasjonsprosessen.

Gå til Tailwind CSS installasjon side. Gå deretter til Rammeveiledninger seksjon og velg

Next.js. Denne delen inneholder alle instruksjonene du trenger for å sette opp Tailwind i ditt Next.js-prosjekt.

For å installere Tailwind via npm, JavaScript-pakkebehandleren, kjør disse to terminalkommandoene:

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

Disse kommandoene oppretter to konfigurasjonsfiler med navn tailwind.config.js og postcss.config.js i rotprosjektmappen. Disse filene indikerer at TailwindCSS ble installert. Du kan også installere Tailwind CSS gjennom Tailwind CLI eller som en PostCSS-plugin.

Konfigurer maler

Etter installasjonen må du konfigurere malbanene som er gitt i installasjonsveiledningen til app-konfigurasjonsfilen. Legg til følgende kode til tailwind.config.js-fil:

/** @type {import('tailwindcss').Config}*/
modul.exports = {
 innhold: [ 
"./app/**/*.{js, ts, jsx, tsx}",
"./pages/**/*.{js, ts, jsx, tsx}",
"./components/**/*.{js, ts, jsx, tsx}",
// Eller hvis du bruker `src`-katalogen: 
"./src/**/*.{js, ts, jsx, tsx}",
 ],
 tema: { 
 utvide: {},
 },
 plugins: [],
}

Legg til medvindsdirektiv i appen

Deretter legger du til følgende Tailwind-direktiver til App CSS-filen din. Dette er filen som heter global.css. Du bør slette innholdet i global.css-filen og legge til Tailwind-direktivene.

@medvind base;
@tailwind komponenter;
@tailwind-verktøy;

Kjør byggeprosessen

Nå, på terminalen, kjør CLI-verktøyet med følgende kommando:

npm kjøre dev

Denne kommandoen skanner malfilene dine for klasser og bygger CSS. Det vil åpne en port for deg å se nettleseren.

Nå, hvis du navigerer til serveren på http://localhost: 3000 du vil se appen din. Du bør merke en liten endring i innholdet. Dette indikerer at installasjonsprosessen er en suksess, og Tailwind CSS er live.

Bruk medvind i prosjektet

La oss deretter teste Tailwind CSS-funksjoner ved å bruke klasser på prosjektet ditt. For eksempel har du en app med teksten «Hello Tailwind». Du vil gi den en rød farge med en lyseblå bakgrunn.

Lage en Hjem.tsx fil og legg til følgende kode:

eksportmisligholdefunksjonHjem() {
komme tilbake (
"bg-blue-300">
'tekst-rød-900'>Hei Tailwind CSS</h1>
 </body>
 );
} 

Nå, når du navigerer til nettleseren, vil du se teksten endret til rød, og bakgrunnen er blå.

Du kan utforske andre Tailwind CSS-funksjoner for å style andre komponenter i appen din. De betingede modifikatorene lar deg lage reaktive tilstander som hover og fokus. Du kan også tilpasse sidene dine til mørke og lyse moduser i henhold til brukerens preferanser.

Fordeler med å bruke Tailwind CSS

Laget av Adam Wathan i 2017, Tailwind CSS skiller seg fra andre CSS-biblioteker på mange måter. Den har null kjøretid, noe som gjør den lynrask. Og er enkel å installere. Tailwind skanner alle HTML-filer og JavaScript-komponenter for klassenavn på appen din. Den genererer deretter de tilsvarende stilene som utformer elementene.

Tailwind CSS lar deg designe komplekse komponenter fra primitive verktøy. Du kan gjenbruke stiler på tvers av komponenter og bruke modifikatorer for å style responsive brukergrensesnitt. Bruk trinnene her for å lære hvordan du installerer og bruker Tailwind CSS for å tilpasse apper som matcher merket ditt.