Tailwind CSS Academy · Lektion

Installera och konfigurera Tailwind

Konfigurera Tailwind CSS via CDN och via npm med CLI:t och se er första formaterade HTML-sida ta form.

Lektion 2 av 413 steg

Installera och konfigurera Tailwind är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Tailwind CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.

Två sätt att lägga till Tailwind

Det finns två sätt att lägga till Tailwind: en CDN-script-tagg för snabb prototyputveckling eller npm CLI för produktion, som bygger en liten optimerad CSS-fil.

<!-- CDN approach (prototyping only) -->
<script src="https://cdn.tailwindcss.com"></script>

Installera Tailwind via npm

För produktion installerar du via npm: tailwindcss, postcss och autoprefixer. Kör sedan npx tailwindcss init -p för att skapa båda konfigurationsfilerna på en gång.

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

Filen tailwind.config.js

Filen tailwind.config.js har ett viktigt fält som du först behöver ställa in: content. Lista alla filer som använder Tailwind-klasser, annars tas klasserna bort från bygget.

// tailwind.config.js
module.exports = {
  content: [
    './index.html',
    './src/**/*.{html,js,jsx,ts,tsx,vue,svelte}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

PostCSS-konfigurationsfilen

Tailwind körs som ett PostCSS-plugin. Filen postcss.config.js talar om för din bundler att köra det. De flesta verktyg hittar filen automatiskt – du behöver sällan ändra den igen.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Skapa din huvudsakliga CSS-fil

Skapa en CSS-entryfil och lägg till de tre @tailwind-direktiven: base, components och utilities. När projektet byggs expanderas de till Tailwind-genererade stilar.

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Kör Tailwind CLI

Tailwind CLI bevakar dina filer och bygger om projektet när du sparar. Ange dina filer med --input och --output, lägg till --watch under utveckling och --minify för produktion.

# Development (with watch)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

# Production (minified)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

Länka CSS-filen i HTML

Nu ska du länka den genererade CSS-filen i HTML-koden precis som vilket stylesheet som helst. Låt href peka på utdatafilen, inte indatafilen, så börjar alla utility-klasser fungera.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="./dist/output.css" rel="stylesheet" />
  <title>My Tailwind Site</title>
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-600">Hello Tailwind!</h1>
</body>
</html>

Tailwind med Vite

Använder du Vite? Tailwind kopplas in via PostCSS. Konfigurera filerna, importera din CSS i main.js och låt Vite sköta resten med omedelbar hot reloading.

// main.js (Vite entry point)
import './src/input.css';

// Then run:
npm run dev

Tailwind med Create React App

I Create React App installerar du paketen, initierar konfigurationen och importerar index.css med direktiven. CRA kör redan PostCSS, så starta bara om servern.

# 1. Install dependencies
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# 2. Add directives to src/index.css
# @tailwind base;
# @tailwind components;
# @tailwind utilities;

# 3. Start dev server
npm start

Tailwind Preflight: CSS-reset

Raden @tailwind base lägger in Preflight, en varsam reset. Den tar bort standardmarginaler, ställer in box-sizing överallt och ger dig en ren och konsekvent grund.

/* Preflight effects (auto-applied): */
/* - All elements: box-sizing: border-box */
/* - Body: margin: 0 */
/* - h1-h6: font-size/weight reset to body defaults */
/* - ul/ol: list-style: none; margin: 0; padding: 0 */

Verifiera installationen

För att verifiera att allt fungerar lägger du till text-3xl font-bold text-indigo-600 på en rubrik. Stor, fet och indigoblå? Då är du klar. Om inte, kontrollerar du content-sökvägarna i konfigurationen.

<!-- Verification test -->
<h1 class="text-3xl font-bold text-indigo-600">
  If this is big, bold, and purple — Tailwind is working!
</h1>

Snabb kontroll

Snabb kontroll! Se till att konfigurationen fungerar. 🛠️

Besvara frågan i den interaktiva lektionen

Sammanfattning av lektionen

Utmärkt! Lägg till Tailwind via CDN eller npm, ange content-sökvägar så att klasserna följer med i bygget och lägg till de tre @tailwind-direktiven. Nästa steg: bygg din första sida.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 30
Lektioner: 120

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Installera och konfigurera Tailwind” gratis?

Ja – hela texten till ”Installera och konfigurera Tailwind” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Tailwind CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Installera och konfigurera Tailwind”?

Konfigurera Tailwind CSS via CDN och via npm med CLI:t och se er första formaterade HTML-sida ta form. Ni övar på Tailwind CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Tailwind CSS Academy?

Du behöver inga förkunskaper. Utbildningen i Tailwind CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Installera och konfigurera Tailwind”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Tailwind CSS Academy-lektionen?

Ja. Varje Tailwind CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Tailwind CSS Academy