Next.js 15-fullstackwebapps · Lektion

Integration af Tailwind CSS

Opsæt og anvend Tailwind CSS til hurtig udvikling af brugergrænseflader med utility-first-klasser.

Lektion 2 af 411 trin

Integration af Tailwind CSS er en gratis Next.js 15-fullstackwebapps-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Next.js 15-fullstackwebapps, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.

Mød Tailwind CSS

Velkommen til styling med Tailwind CSS! Det er et populært CSS-framework baseret på hjælpeklasser, som hjælper dig med hurtigt at bygge tilpassede designs.

I stedet for at skrive tilpasset CSS for hvert element anvender du foruddefinerede hjælpeklasser direkte i din HTML eller JSX.

Hjælpeklassebaseret udvikling forklaret

Hvad betyder »hjælpeklassebaseret«?

Små klasser med ét formål: Hver klasse gør én ting, f.eks. text-blue-500 til tekstfarve eller p-4 til indvendig margen.
Byg komplekse brugergrænseflader: Du kombinerer mange små hjælpeklasser for at skabe unikke designs.
Ingen tilpasset CSS nødvendig: Du behøver ofte ikke skrive tilpassede CSS-filer, hvilket gør udviklingen hurtigere.

Tailwind og Next.js: Det perfekte match

Tailwind CSS passer fremragende sammen med Next.js:

Komponentbaseret: Anvend nemt klasser direkte på dine React-komponenter.
Ingen kørselstid: Tailwind genererer statisk CSS på byggetidspunktet, så der ikke sendes ekstra JavaScript til browseren til styling.
Fjernelse af ubrugte klasser: Ubrugt CSS fjernes automatisk, så den endelige bundle-størrelse holdes lille.

Trin 1: Installér de centrale afhængigheder

Først tilføjer vi Tailwind CSS og dets peer-afhængigheder til dit Next.js-projekt. Vi installerer dem som udviklingsafhængigheder.

tailwindcss: Det centrale framework.
postcss: Et værktøj til at transformere CSS.
autoprefixer: Et PostCSS-plugin, der tilføjer leverandørpræfikser til CSS-regler.

npm install -D tailwindcss postcss autoprefixer

Trin 2: Initialisér Tailwind-konfigurationen

Generér derefter dine Tailwind-konfigurationsfiler. Flaget -p opretter både tailwind.config.js og postcss.config.js for dig.

npx tailwindcss init -p

Trin 3: Konfigurér indholdsstier

Åbn tailwind.config.js. Du skal fortælle Tailwind, hvor det kan finde de filer (f.eks. sider og komponenter), der skal bruge Tailwind-klasser. Det gør det muligt at gennemsøge filerne og kun generere den nødvendige CSS.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Trin 4: Tilføj Tailwind-direktiver til CSS

Åbn nu din globale CSS-fil (normalt ./app/globals.css i App Router). Tilføj @tailwind-direktiverne øverst. De indsætter Tailwinds grundtypografier, komponenter og hjælpeklasser i dit projekt.

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Your custom global styles can go here */

Brug af hjælpeklasser i JSX

Når Tailwind er sat op, kan du begynde at anvende klasser direkte på dine elementer. Bemærk, hvordan flere klasser kombineres for at style h1-elementet i dette eksempel.

// app/page.js or a component file

export default function HomePage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <h1 className="text-4xl font-bold text-indigo-600 p-6 rounded-lg shadow-md bg-white">
        Hello Tailwind!
      </h1>
    </div>
  );
}

Responsivt design gjort nemt

Tailwind bruger en mobile-first-tilgang til responsivt design. Du kan anvende forskellige typografier ved forskellige brudpunkter ved hjælp af præfikser som sm:, md: og lg:.

p-4: Standardindvendig margen (små skærme).
md:p-8: Indvendig margen til mellemstore skærme og større.
lg:p-12: Indvendig margen til store skærme og større.

// app/page.js or a component file

export default function ResponsivePage() {
  return (
    <div className="p-4 md:p-8 lg:p-12 bg-blue-100 md:bg-green-100 lg:bg-purple-100">
      <p className="text-base md:text-lg lg:text-xl font-medium">
        Watch me change on different screen sizes!
      </p>
    </div>
  );
}

Kontrol af Tailwind-integration

Du har lært de vigtigste trin til at integrere Tailwind CSS i dit Next.js-projekt. Lad os teste din forståelse!

Besvar den i den interaktive lektion

Opsummering: Styling med Tailwind

Tillykke! Du har nu lært at integrere Tailwind CSS i din Next.js-applikation.

Installation: Tilføjede Tailwind- og PostCSS-afhængigheder.
Konfiguration: Initialiserede og konfigurerede tailwind.config.js, så dine filer gennemsøges.
Integration: Inkluderede Tailwinds grundtypografier i din globale CSS.
Anvendelse: Begyndte at style komponenter med hjælpeklasser og lærte om responsivt design.

Tailwind CSS gør det muligt for dig hurtigt at bygge flotte, responsive brugergrænseflader med et ensartet designsystem.

Gratis at komme i gang

Lær TypeScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Integration af Tailwind CSS” gratis?

Ja — alle 3 lektioner i læringssporet Next.js 15-fullstackwebapps, inklusive “Integration af Tailwind CSS”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Integration af Tailwind CSS”?

Opsæt og anvend Tailwind CSS til hurtig udvikling af brugergrænseflader med utility-first-klasser. Du øver dig i Next.js 15-fullstackwebapps med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Next.js 15-fullstackwebapps?

Der kræves ingen tidligere erfaring. Next.js 15-fullstackwebapps på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Integration af Tailwind CSS”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Next.js 15-fullstackwebapps-lektion?

Ja. Alle Next.js 15-fullstackwebapps-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Next.js 15-fullstackwebapps