Tailwind CSS guide for nybegynnere — 2026-utgaven

Hva er utility-first CSS og hvorfor er det kontroversielt?

Tradisjonell CSS-tilnærming er "semantisk": du lager en klasse som `.knapp-primær` og gir den stiler. Tailwind snur dette på hodet — istedenfor å lage egne klasser, kombinerer du mange korte utility-klasser direkte i HTML-en. En knapp kan se slik ut i HTML: `<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">Klikk meg</button>`.

Første reaksjon hos mange er at dette ser rotete ut. Men etter noen dager med Tailwind rapporterer de fleste det motsatte: du trenger ikke å bytte mellom HTML og CSS, du trenger ikke å finne på klassenavn (ingen flere `.knapp-kontainer-wrapper`), og stiler havner aldri i konflikt med hverandre fordi de er scopet til hvert element. Det er en filosofisk endring som tar tid å venne seg til, men som de aller fleste beholder permanent når de prøver det.

Installasjon i Vite og Next.js

For et Vite-prosjekt (React eller Vue): kjør `npm install -D tailwindcss @tailwindcss/vite` og legg til Tailwind som Vite-plugin i `vite.config.js`. Legg deretter `@import "tailwindcss"` øverst i din hoved-CSS-fil. For Next.js er prosessen enda enklere i 2025: `npx create-next-app@latest` spør deg om du vil bruke Tailwind og setter opp alt automatisk om du svarer ja. I begge tilfeller er du klar til å bruke Tailwind-klasser i løpet av to minutter.

• Installer: `npm install -D tailwindcss @tailwindcss/vite`
• Legg til i vite.config: `import tailwindcss from "@tailwindcss/vite"`
• Importer i CSS: `@import "tailwindcss"` øverst i main.css
• For Next.js: `npx create-next-app@latest` og velg Tailwind
• For eksisterende Next.js-prosjekt: `npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init`
• Test at det fungerer ved å legge til `class="text-blue-500"` på et element

Responsive design med prefixes — sm, md, lg, xl, 2xl

Tailwinds responssystem er mobile-first: klasser uten prefix gjelder alle skjermstørrelser. Prefikset `sm:` gjelder fra 640px og oppover, `md:` fra 768px, `lg:` fra 1024px, `xl:` fra 1280px og `2xl:` fra 1536px. For å lage et rutenett som er én kolonne på mobil og tre kolonner på desktop: `class="grid grid-cols-1 md:grid-cols-3 gap-4"`.

Dette gjør det ekstremt intuitivt å bygge responsive layouts. Du ser direkte i HTML-koden hvordan elementet oppfører seg på ulike skjermstørrelser, uten å hoppe mellom HTML og CSS-filer. For norske mediebyråer og designere som jobber med Figma og deretter implementerer — Tailwinds spacing-skala matcher vanlige designsystemer svært godt.

Darkmode — innebygd og enkelt

Tailwind har innebygd støtte for darkmode med `dark:`-prefikset. Med Tailwind v4 er darkmode basert på CSS media query (`prefers-color-scheme`) som standard. For å gi et element hvit bakgrunn i lys modus og mørk bakgrunn i mørk modus: `class="bg-white dark:bg-gray-900"`. Tekst: `class="text-gray-900 dark:text-gray-100"`. Du kan også konfigurere Tailwind til å bruke class-basert darkmode, der en `dark`-klasse på HTML-elementet styrer modus — nyttig om du vil la brukeren velge manuelt.

Tailwind vs. vanlig CSS — en ærlig sammenligning

Tailwind er ikke for alle. Innhold-tunge sider med mye HTML generert fra CMS (Markdown, WordPress) er vanskelig å style med utility-klasser — der er tradisjonell CSS eller CSS Modules bedre. Tailwind skinner i komponent-baserte applikasjoner bygd med React, Vue eller Svelte der HTML-strukturen er under din kontroll.

En konkret fordel som ofte nevnes av norskt utviklere: CSS-bundle-størrelse. Tailwind fjerner alle ubrukte stiler automatisk under bygging, slik at produksjonsbundlen kun inneholder CSS som faktisk brukes. En stor norsk e-handelsapp med Tailwind kan ha 8–15 KB CSS i produksjon, mens samme app med Bootstrap gjerne har 150+ KB. Dette gir målbare ytelsesforbedringer for norske mobilbrukere med varierende nettdekning.

Gjenbruk og komponenter — unngå gjentakelse

En vanlig innvending mot Tailwind er at du ender opp med å gjenta lange klasse-strenger overalt. Løsningen er komponentabstraksjon: i React lager du en `<Knapp>`-komponent med klasse-strengen én gang, og bruker komponenten overalt. Tailwind v4 introduserte også `@apply`-direktivet der du kan samle utility-klasser i en semantisk CSS-klasse: `.knapp { @apply bg-blue-600 text-white px-4 py-2 rounded-lg; }`. Bruk dette sparsomt — den ekte verdien av Tailwind er utility-klassene direkte i komponentene.

Shadcn/ui er et populært bibliotek med ferdige React-komponenter bygd på Tailwind og Radix UI. Du "eier" komponentene — de kopieres inn i prosjektet ditt og kan modifiseres fritt. For norske utviklere som vil ha et profesjonelt startpunkt for et dashboard eller en admin-panel er dette et svært effektivt alternativ til Bootstrap eller Material UI.