Tailwind CSS Academy · Lektion

Innehållssökvägar och rensning

Konfigurera content-arrayen korrekt så att Tailwind genomsöker alla filer och tar bort oanvända klasser i produktionsbyggen.

Lektion 2 av 413 steg

Innehållssökvägar och rensning ä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.

Varför rensning är viktig

Tailwind CSS genererar utility-klasser för varje kombination av dina temavärden — potentiellt hundratusentals klasser. Utan rensning skulle den råa CSS-utmatningen bli flera megabyte stor. Processen purging (som officiellt kallas innehållsskanning eller tree-shaking) tar bort alla klasser som inte förekommer i dina källfiler och minskar den produktionsanpassade CSS-koden till vanligtvis bara 5–50 KB. Det är viktigt att konfigurera content korrekt för att få en kompakt build.

Så fungerar innehållsskanning

Tailwind genomsöker filerna du anger i arrayen content och letar efter strängmönster som liknar Tailwind-klassnamn. Koden körs inte — i stället görs en enkel textsökning. Alla strängar som matchar en känd utility-klass tas med i utmatningen. Därför får du aldrig skapa klassnamn dynamiskt genom att sammanfoga strängar; skannern hittar inte hela klassnamnet.

// BAD: Tailwind cannot detect 'text-red-500'
const color = 'red';
const cls = 'text-' + color + '-500';  // scanner sees 'text-' + 'red' + '-500'

// GOOD: Full class names are always present in source
const cls = isError ? 'text-red-500' : 'text-green-500';  // scanner sees both

Skriva glob-mönster för content

Glob-mönster i arrayen content använder vanlig glob-syntax. Dubbla stjärnor ** matchar valfritt antal katalognivåer. Klammade uttryck {} matchar flera filändelser. Var så specifik som möjligt — undvik alltför breda mönster (som ./**/*), eftersom de gör skanningen långsammare genom att inkludera filer som bilder och JSON, vilka inte kan innehålla klassnamn.

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx,vue}',
    './components/**/*.{js,jsx,ts,tsx}',
    './pages/**/*.{js,jsx,ts,tsx}',
    './layouts/**/*.html',
    // Include a specific file
    './public/index.html',
    // Include node_modules (for UI library components)
    './node_modules/@my-ui/components/dist/**/*.js',
  ],
};

Content för populära ramverk

Olika ramverk organiserar sina filer på olika sätt. Här är de korrekta content-mönstren för de vanligaste uppsättningarna. Next.js behöver katalogerna app/ och pages/. Vue-projekt använder vanligtvis .vue-filer. Laravels Blade-mallar finns i resources/views/. Kontrollera alltid att dina startfiler (som index.html eller layoutfiler) uttryckligen finns med om de ligger utanför dina glob-mönster.

// Next.js App Router
content: ['./app/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}']

// Vue + Vite
content: ['./index.html', './src/**/*.{vue,js,ts}']

// Laravel Blade
content: ['./resources/**/*.blade.php', './resources/**/*.js']

// Nuxt 3 (usually auto-detected, but explicit)
content: ['./components/**/*.vue', './pages/**/*.vue', './layouts/**/*.vue']

Alternativet safelist

Ibland skapas klasser vid körning och kan därför inte upptäckas genom statisk skanning — till exempel klassnamn som byggs från CMS-innehåll, användarinmatning eller API-svar. Använd alternativet safelist för att tvinga med specifika klasser eller mönster, så att de alltid finns i utmatningen oavsett om skannern hittar dem eller inte. Du kan ange enskilda strängar eller reguljära uttryck i safelist.

// tailwind.config.js
module.exports = {
  safelist: [
    // Individual classes
    'text-red-500',
    'bg-blue-100',
    // Pattern: all bg-{color}-{shade} for red and green
    {
      pattern: /bg-(red|green)-(100|200|300|400|500)/,
    },
    // Include hover variants too
    {
      pattern: /bg-red-(400|500)/,
      variants: ['hover', 'focus'],
    },
  ],
};

Alternativet blocklist

Alternativet blocklist är motsatsen till safelist — det hindrar specifika klasser från att tas med i utmatningen även om skannern hittar dem i källan. Det är användbart för att upprätthålla teamets konventioner (genom att förhindra användning av föråldrade utility-namn) eller minska utmatningens storlek genom att uttryckligen utesluta utilities som du vet att du aldrig kommer att använda, till exempel vissa textstorleks- eller animationsklasser.

// tailwind.config.js
module.exports = {
  blocklist: [
    // Prevent these classes from being generated
    'container',
    'prose',
    'animate-bounce',
  ],
};

Innehållstransformering

För filer som behöver förbehandlas före skanning — som .pug-mallar, .md-filer eller anpassade mallmotorer — låter Tailwinds alternativ content.transform dig ange en funktion som omvandlar det råa filinnehållet till en sträng med klassnamn. Detta behövs sällan men är kraftfullt i specialfall där filformatet döljer klassnamn på ett svårupptäckt sätt.

// tailwind.config.js
module.exports = {
  content: {
    files: ['./src/**/*.{html,js}'],
    transform: {
      // Transform markdown files before scanning
      md: (content) => {
        // Render to HTML first so class names are visible
        return renderMarkdownToHtml(content);
      },
    },
  },
};

Innehållsextrahering för komponentbibliotek

Om projektet använder ett tredjepartsbibliotek med komponenter som levererar förbyggd JavaScript med inbäddade Tailwind-klasser, måste du inkludera bibliotekets dist-filer i arrayen content. Många populära Tailwind-komponentbibliotek (som Flowbite, daisyUI eller anpassade interna bibliotek) fungerar på detta sätt. Lägg till sökvägen till deras byggda JavaScript-utdata så att skannern kan upptäcka vilka klasser de använder.

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    // Include prebuilt components from a library
    './node_modules/flowbite/**/*.js',
    // Or a local package in a monorepo
    '../../packages/ui/src/**/*.{js,jsx,ts,tsx}',
  ],
};

Verifiera din content-konfiguration

Bekräfta att din content-konfiguration fungerar korrekt genom att köra npx tailwindcss build och kontrollera utdatafilens storlek. En välkonfigurerad produktions-build bör vara mindre än 50 KB (ofta betydligt mindre). Du kan även köra Tailwind CLI med flaggan --watch under utvecklingen för att se kompileringen i realtid och kontrollera att en ny klass omedelbart visas i utmatningen.

# Build and check output size
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

# Check the size
wc -c < ./dist/output.css  # bytes
ls -lh ./dist/output.css   # human-readable

# Watch mode for development
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

JIT och klassgenerering vid behov

Tailwind v3 använder som standard en Just-In-Time (JIT)-motor. Till skillnad från den äldre metoden med PurgeCSS genererar JIT klasser vid behov medan du skriver dem och genomsöker dina innehållsfiler i realtid under utvecklingen. Det innebär att din CSS-kod under utvecklingen redan är liten och exakt motsvarar produktionen — det finns inget separat rensningssteg i v3. Arrayen content används både för skanning under utvecklingen och för optimering i produktion.

Vanliga misstag i content-konfigurationen

Det vanligaste misstaget är saknade filer i arrayen content — klasser från dessa filer rensas bort i produktionen. Ett annat misstag är dynamisk klasskonstruktion, där hela klassnamnet aldrig förekommer som en sträng. Ett tredje problem är att glömma mallfiler i ramverk som inte använder JavaScript. Testa alltid produktionsbygget lokalt med NODE_ENV=production för att upptäcka problem med rensning innan du distribuerar.

// Common mistake: incomplete pattern
content: ['./src/**/*.js']  // MISSES .jsx, .tsx, .html files!

// Better: cover all template types
content: ['./src/**/*.{html,js,jsx,ts,tsx}']

// Also common: missing the root HTML file
content: [
  './index.html',              // don't forget this!
  './src/**/*.{js,jsx,ts,tsx}'
]

Snabb kontroll

Testa din förståelse av Tailwinds innehållssökvägar och klassrensning.

Besvara frågan i den interaktiva lektionen

Lektionssammanfattning

I den här lektionen lärde du dig att content-arrayen anger vilka filer Tailwind ska genomsöka efter klassnamn, att hela klassnamn alltid måste förekomma som bokstavliga strängar för att skannern ska upptäcka dem och att alternativet safelist tvingar med klasser som inte kan upptäckas statiskt. Härnäst utforskar vi skillnaden mellan att utöka och att ersätta Tailwind-temat.

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 ”Innehållssökvägar och rensning” gratis?

Ja – hela texten till ”Innehållssökvägar och rensning” 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 ”Innehållssökvägar och rensning”?

Konfigurera content-arrayen korrekt så att Tailwind genomsöker alla filer och tar bort oanvända klasser i produktionsbyggen. 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 ”Innehållssökvägar och rensning”?

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