Frontend Academy · leksjon

Tailwind CSS: utility-first-tilnærmingen

Bruk forhåndsbygde utility-klasser direkte i HTML, tilpass temaet i tailwind.config.js, og bruk @apply til å trekke ut gjentatte mønstre.

Leksjon 4 av 413 trinn

Tailwind CSS: utility-first-tilnærmingen er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 4 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 Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva er utility-first CSS?

Tailwind CSS tilbyr forhåndsbygde utility-klasser for alle CSS-egenskaper. I stedet for å skrive egendefinert CSS setter du sammen stiler ved å legge utility-klasser direkte til i HTML. Én klasse = én CSS-deklarasjon.

Installere Tailwind

Installer Tailwind og initialiser konfigurasjonen. Vite-prosjekter bruker Tailwind Vite-pluginen eller PostCSS-pluginen.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

# Or with Vite plugin:
npm install -D @tailwindcss/vite

Utility-klasser i praksis

Bygg et kort ved å bruke bare utility-klasser fra Tailwind. Du trenger ingen egendefinert CSS-fil.

<div class="bg-white rounded-lg shadow-md p-6 max-w-sm">
  <img class="w-full h-48 object-cover rounded-md mb-4" src="..." alt="...">
  <h2 class="text-xl font-semibold text-gray-800">Card Title</h2>
  <p class="text-gray-500 mt-2">Card description goes here.</p>
  <button class="mt-4 w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-colors">
    Read More
  </button>
</div>

Responsive prefikser

Legg til prefikser for responsive bruddpunkter. md: brukes på mellomstore skjermer og større. lg: brukes på store skjermer. Tailwind er mobile-first.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

Tilstandsvarianter

Sett tilstandsvarianter foran klassenavn: hover:, focus:, active:, disabled:, dark:.

<button class="bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed">

Konfigurere temaet

Tilpass farger, avstand, skrifter og bruddpunkter i tailwind.config.js. Utvid standardtemaet eller erstatt deler av det.

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        brand: { 500: '#6366f1', 600: '#4f46e5' }
      },
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans]
      }
    }
  }
}

@apply – trekke ut mønstre

Bruk @apply i CSS-filer til å sette sammen utility-klasser i en gjenbrukbar CSS-regel. Bruk dette med måte – direkte utility-klasser foretrekkes i de fleste tilfeller.

/* Only for highly repeated patterns */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-indigo-600 text-white rounded-md
           hover:bg-indigo-700 transition-colors font-medium;
  }
}

Fjerne ubrukt CSS

Tailwind genererer tusenvis av utility-klasser. I produksjon skanner det kildefilene dine og fjerner alle klasser som ikke brukes, slik at CSS-filene blir svært små (ofte under 10 KB).

Tailwind med React/Vue

I React bruker du cn() (clsx + twMerge) til å legge til Tailwind-klasser betinget uten konflikter. I Vue bruker du :class-bindinger.

import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...classes: string[]) { return twMerge(clsx(classes)); }

<div className={cn('rounded-lg p-4', featured && 'border-2 border-indigo-600')}>

Tailwind IntelliSense

Installer Tailwind CSS IntelliSense-utvidelsen for VSCode for autofullføring, forhåndsvisning av klassenavn ved pekerbevegelse og linting av ukjente klasser. Dette forbedrer Tailwind-utviklingsopplevelsen betydelig.

Kritikk av og forsvar for Tailwind

Kritikere: HTML blir overfylt av mange klasser og er vanskeligere å lese. Forsvar: Du skriver aldri CSS, alle stilene ligger samlet, og designsystemet håndheves gjennom konfigurasjonen. De fleste team som prøver Tailwind, rapporterer jevnt over høyere produktivitet.

Hurtigsjekk

Hvordan håndterer Tailwind størrelsen på produksjonsbundlen når det genererer tusenvis av utility-klasser?

Besvar den i den interaktive leksjonen

Oppsummering: Tailwind CSS

Utility-first: én klasse = én CSS-egenskap. Du trenger ikke egendefinert CSS i de fleste tilfeller. Responsive prefikser og tilstandsprefikser (md:, hover:). Tilpass med tailwind.config.js. Bruk @apply for gjentatte mønstre. Produksjonsbygget skanner og fjerner ubrukte klasser. Bruk cn() + twMerge for betingede klasser i React. Installer IntelliSense-utvidelsen.

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: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Tailwind CSS: utility-first-tilnærmingen» gratis?

Ja – hele teksten i «Tailwind CSS: utility-first-tilnærmingen» 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 Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Tailwind CSS: utility-first-tilnærmingen»?

Bruk forhåndsbygde utility-klasser direkte i HTML, tilpass temaet i tailwind.config.js, og bruk @apply til å trekke ut gjentatte mønstre. Du øver på Frontend 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 Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend 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 4 av 4.

Hvor lang tid tar leksjonen «Tailwind CSS: utility-first-tilnærmingen»?

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 Frontend Academy-leksjonen?

Ja. Alle Frontend 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

BEM-metodikk: Block, Element, Modifier
CSS Modules: scopede klassenavn
CSS-in-JS: Styled-components og Emotion
Tailwind CSS: utility-first-tilnærmingen

← Tilbake til Frontend Academy