Tailwind CSS Academy · leksjon

Installere og konfigurere Tailwind

Sett opp Tailwind CSS via CDN og via npm med CLI, og se Deres første stylede HTML-side bli levende.

Leksjon 2 av 413 trinn

Installere og konfigurere Tailwind er en gratis leksjon i Tailwind CSS Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Tailwind CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.

To måter å legge til Tailwind på

To måter å legge til Tailwind på: en CDN-script-tag for rask prototyping eller npm CLI for produksjon, som bygger en liten, optimalisert CSS-fil.

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

Installere Tailwind via npm

For produksjon installerer De via npm: tailwindcss, postcss og autoprefixer. Kjør deretter npx tailwindcss init -p for å opprette begge konfigurasjonsfilene samtidig.

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

Filen tailwind.config.js

Filen tailwind.config.js har ett viktig felt De bør angi først: content. List opp alle filer som bruker Tailwind-klasser, ellers blir disse klassene utelatt fra bygget.

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

PostCSS-konfigurasjonsfilen

Tailwind kjører som et PostCSS-programtillegg. Filen postcss.config.js forteller bundleren at den skal kjøre det. De fleste verktøy finner den automatisk – De trenger sjelden å endre den igjen.

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

Opprette hoved-CSS-filen

Lag en CSS-inngangsfil og legg til de tre @tailwind-direktivene: base, components og utilities. Ved bygging utvides de til stilene som genereres av Tailwind.

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

Kjøre Tailwind CLI

Tailwind CLI følger med på filene Deres og bygger på nytt når De lagrer. Pek --input og --output til filene Deres, legg til --watch under utvikling og --minify i produksjon.

# 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

Koble CSS-en til HTML

Koble nå den genererte CSS-en til HTML-en slik De ville koblet til et hvilket som helst stilark. Pek href til utdatafilen, ikke inndatafilen, så begynner alle utility-klasser å fungere.

<!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

Bruker De Vite? Tailwind kobles til gjennom PostCSS. Konfigurer filene, importer CSS-en i main.js, så håndterer Vite resten med umiddelbar 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 installerer De pakkene, initialiserer konfigurasjonen og importerer index.css med direktivene. CRA kjører allerede PostCSS, så De trenger bare å starte serveren på nytt.

# 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-resetten

Linjen @tailwind base setter inn Preflight, en skånsom reset. Den fjerner standardmarger, angir box-sizing overalt og gir Dem et rent og konsekvent utgangspunkt.

/* 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 */

Bekrefte installasjonen

For å bekrefte at det fungerer, legger De til text-3xl font-bold text-indigo-600 på en overskrift. Stor, fet og indigoblå? Da er De klar. Hvis ikke bør De kontrollere innholdsbanene i konfigurasjonen.

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

Kort kontroll

Kort kontroll! Sørg for at oppsettet er på plass. 🛠️

Besvar den i den interaktive leksjonen

Oppsummering av leksjonen

Flott! Legg til Tailwind via CDN eller npm, angi content-baner slik at klassene blir med i bygget, og legg til de tre @tailwind-direktivene. Neste trinn: bygge Deres første side.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 30
Leksjoner: 120

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Installere og konfigurere Tailwind» gratis?

Ja – hele teksten i «Installere og konfigurere Tailwind» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Tailwind CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Installere og konfigurere Tailwind»?

Sett opp Tailwind CSS via CDN og via npm med CLI, og se Deres første stylede HTML-side bli levende. Du øver på Tailwind CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Tailwind CSS Academy?

Ingen tidligere erfaring er nødvendig. Tailwind CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Installere og konfigurere Tailwind»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Tailwind CSS Academy-leksjonen?

Ja. Alle Tailwind CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Tailwind CSS Academy