Tailwind CSS Academy · Lektion

Analysera och minska paketstorleken

Mät storleken på den slutliga CSS-utdata, identifiera oanvända stilar som slinker igenom och finjustera era content-globs för maximal effektivitet vid rensning.

Lektion 3 av 413 steg

Analysera och minska paketstorleken är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 3 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 paketstorleken fortfarande spelar roll med JIT

Tailwinds JIT-motor eliminerar automatiskt det mesta av den oanvända CSS:en, men paketstorleken kan ändå växa om ni inte är försiktiga. Ett felkonfigurerat content-glob kan inkludera för många filer, en stor safelist kan lägga till hundratals klasser och komplexa godtyckliga värden kan öka utdata.

Även ett välkonfigurerat Tailwind-projekt drar nytta av regelbunden paketgranskning för att bekräfta att utdata är så liten som den bör vara och upptäcka konfigurationsproblem innan de når produktion.

Mäta storleken på CSS-utdata

Det första steget när ni analyserar paketet är att känna till dess aktuella storlek. Bygg Tailwind-CSS i produktionsläge och kontrollera filstorleken före och efter minifiering och komprimering.

Använd wc -c för att kontrollera antalet råa byte och jämför med den gzip-komprimerade storleken, vilket är det som webbläsare faktiskt hämtar. En väloptimerad Tailwind-stilmall för produktion är vanligtvis 5–15 KB okomprimerad och 2–5 KB gzip-komprimerad.

# Build production CSS
NODE_ENV=production npx tailwindcss -i input.css -o dist/output.css --minify

# Check uncompressed size
wc -c dist/output.css
# Example output: 12048 dist/output.css (12KB uncompressed)

# Check gzipped size
gzip -c dist/output.css | wc -c
# Example output: 3421 (3.4KB gzipped — excellent)

# If size > 50KB uncompressed, investigate further

Kontrollera täckningen för content-glob

Den vanligaste orsaken till för stor Tailwind-utdata är ett alltför brett content-glob som genomsöker för många filer, inklusive leverantörsbibliotek eller genererade utdatafiler som råkar innehålla strängar som liknar CSS-klasser.

Om node_modules/** eller katalogen med kompilerad utdata inkluderas av misstag kan JIT generera tusentals irrelevanta klasser. Granska varje globmönster i er content-array och se till att det endast omfattar era faktiska källmallar.

// BAD: Too broad — scans node_modules (thousands of spurious classes)
module.exports = {
  content: ['**/*.{html,js}'],  // matches ALL files including node_modules!
};

// GOOD: Scoped to your actual source directories
module.exports = {
  content: [
    './src/**/*.{html,js,ts,tsx}',
    './pages/**/*.{js,ts,tsx}',
    './components/**/*.{js,ts,tsx}',
    // Explicitly include specific external packages if needed:
    './node_modules/@headlessui/react/**/*.{js,ts}',
  ],
};

Granska med PurgeCSS-rapporter

Ni kan använda PurgeCSS i analysläge, separat från Tailwinds inbyggda genomsökning, för att generera en rapport över vilka CSS-selektorer som behålls och vilka som skulle tas bort. Det hjälper er att identifiera oväntade klasser i utdata.

Alternativt kan ni söka i den kompilerade CSS-filen efter klassmönster som inte borde finnas där: om ni ser hundratals bg--varianter, inklusive färger som ni aldrig använder, bör ni kontrollera era safelist-mönster — de kan generera fler klasser än avsett.

# Install PurgeCSS CLI
npm install -g purgecss

# Run PurgeCSS on your built CSS
purgecss --css dist/output.css \
         --content './src/**/*.html' \
         --output dist/purged.css \
         --rejected-css dist/rejected.css

# Check rejected.css — classes in this file are in your built CSS
# but not found in your templates.
# If there are many, review your safelist and content configuration.

Identifiera överflödig safelist

En stor eller bred safelist är en vanlig källa till ett uppsvällt paket. Varje mönster genererar många klasser. Exempelvis genererar /bg-(red|green|blue|yellow|purple|orange|pink|indigo|violet|teal|cyan|rose)-(50|100|200|300|400|500|600|700|800|900|950)/ hela 132 bakgrundsfärgklasser — även om ni bara använder 10 av dem.

Granska er safelist genom att räkna mönstren och uppskatta hur många klasser varje mönster genererar. Ta bort mönster som ni lade till på spekulation och behåll endast sådana som behövs för kända användningsfall med dynamiska klasser.

// Bloated safelist (generates hundreds of classes)
safelist: [
  { pattern: /bg-(red|green|blue|yellow|purple|orange|pink)-(100|200|300|400|500|600|700|800|900)/ },
  // ^ generates 63 classes
  { pattern: /text-(red|green|blue|yellow|purple|orange|pink)-(100|200|300|400|500|600|700|800|900)/ },
  // ^ another 63
]
// Total: 126+ extra classes from safelist alone

// Optimized safelist (only what's actually used dynamically)
safelist: [
  { pattern: /bg-(red|green|yellow|blue)-(100|500)/ }, // 8 classes
  { pattern: /text-(red|green|yellow|blue)-(700|800)/ }, // 8 classes
]

Ta bort oanvända basstilar

Tailwinds preflight (en grundläggande CSS-reset) lägger till ungefär 4 KB basstilar. Om ni använder Tailwind tillsammans med ett CSS-ramverk som har en egen reset, eller om ni inför Tailwind stegvis, kan ni vilja inaktivera preflight.

Ange corePlugins: { preflight: false } i konfigurationen för att ta bort reseten. Det kan spara några KB, särskilt i projekt där basstilarna hamnar i konflikt med befintlig CSS.

// tailwind.config.js — disable preflight
module.exports = {
  corePlugins: {
    preflight: false,
  },
  // OR: disable multiple core plugins to reduce output
  corePlugins: {
    preflight: false,     // Remove reset styles
    container: false,     // Remove .container utility if unused
    float: false,         // Remove float utilities if not used
    clear: false,
    skew: false,          // Remove skew transforms if not used
  },
}

Inaktivera oanvända kärnplugins

Du kan inaktivera hela grupper av verktyg som projektet aldrig använder för att minska den genererade CSS-koden. Ett projekt som inte använder CSS Grid kan till exempel inaktivera Grid-pluginerna. Ett projekt som inte använder transformeringar kan inaktivera rotate, scale, skew och translate.

Kontrollera mallarna efter prefix för verktyg som du aldrig använder. Om du inaktiverar ett kärnplugin genereras inga varianter av dessa verktyg, även om de på något sätt förekommer i innehållsskanningen (till exempel i mallsträngar som liknar klassnamn).

// tailwind.config.js
module.exports = {
  corePlugins: [
    // Whitelist approach: only enable plugins your project uses
    // (Empty array = disable ALL core plugins — not recommended unless you know exactly what you need)
    // Better: use the object form to disable specific ones
  ],
  // Object form: disable only specific plugins
  corePlugins: {
    // If your project doesn't use blur/backdrop-filter at all:
    backdropBlur: false,
    backdropBrightness: false,
    backdropContrast: false,
    backdropGrayscale: false,
    backdropHueRotate: false,
    backdropInvert: false,
    backdropOpacity: false,
    backdropSaturate: false,
    backdropSepia: false,
  },
}

Aktivera CSS-komprimering

Utöver Tailwinds egen minifiering (--minify) bör du konfigurera ditt byggverktyg så att det tillämpar ytterligare CSS-komprimering. Både Vite och webpack stöder CSS-minifiering via sina inbyggda pipelines eller pluginbaserade pipelines.

För maximal komprimering kan du kombinera CSS-minifiering med Brotli-komprimering på servernivå. Brotli ger 15–25 % bättre komprimering än gzip för CSS-filer, vilket minskar den faktiska datamängden ytterligare.

// vite.config.js — enable CSS minification
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    cssMinify: true,  // default in production mode
    cssCodeSplit: true, // split CSS per page in multi-page apps
  },
});

// next.config.js — Next.js minifies CSS automatically in production
// No extra configuration needed

Tree-shaking av oanvänd JavaScript i Tailwind-projekt

I React- och Vue-projekt tar tree-shaking bort oanvänd JavaScript, men det påverkar också hur klasser når JIT. Om en komponent tas bort från bundlen genom tree-shaking kanske dess klasssträngar inte förekommer i den kompilerade JS-koden, vilket gör att JIT missar dem.

Lösningen är att konfigurera dina content-globs så att de pekar på källfiler (före tree-shaking), inte på kompilerad output. JIT bör alltid skanna dina källfiler i TypeScript/JavaScript, inte den kompilerade bundlen.

// tailwind.config.js
module.exports = {
  content: [
    // Source files (correct): JIT sees all possible classes
    './src/**/*.{ts,tsx}',
    './src/**/*.{js,jsx}',

    // Compiled output (wrong): some classes may be missing
    // './dist/**/*.js', // Don't scan compiled output
  ],
}

Analysera bundlestorleken över tid

Bundlestorleken tenderar att växa gradvis när nya funktioner läggs till. Konfigurera en CI-kontroll som mäter CSS-bundlens storlek vid varje pull request och misslyckas om den överskrider en gräns. Då upptäcks oavsiktliga utökningar av safelisten eller alltför breda glob-mönster innan de når produktion.

Verktyg som bundlesize, size-limit eller ett enkelt bash-skript som jämför filstorlekar kan integreras i din CI-pipeline för att upprätthålla storleksgränser.

# .github/workflows/css-size-check.yml
# Build CSS and fail if it exceeds 20KB
npx tailwindcss -i input.css -o /tmp/tailwind.css --minify
CSS_SIZE=$(wc -c < /tmp/tailwind.css)
echo "CSS size: ${CSS_SIZE} bytes"
if [ ${CSS_SIZE} -gt 20480 ]; then
  echo "ERROR: CSS bundle exceeds 20KB limit (${CSS_SIZE} bytes)"
  exit 1
fi

Slutlig checklista för optimering

Gå igenom den här checklistan innan du levererar ett Tailwind-projekt till produktion:

NODE_ENV=production är inställt under bygget
Content-globs inkluderar inte node_modules brett
Safelist-mönstren är snäva och dokumenterade
Oanvända kärnpluginer är inaktiverade i konfigurationen
CSS är minifierad (Tailwinds flagga --minify eller byggverktyget)
Serverkomprimering (gzip eller Brotli) är aktiverad
CSS-filens storlek ligger under den angivna gränsen (vanligtvis 15 KB okomprimerad)

# Full production optimization command
NODE_ENV=production npx tailwindcss \
  -i ./src/input.css \
  -o ./dist/tailwind.min.css \
  --minify

# Verify result
echo 'Uncompressed:' $(wc -c < ./dist/tailwind.min.css) 'bytes'
echo 'Gzipped:' $(gzip -c ./dist/tailwind.min.css | wc -c) 'bytes'

Snabbkontroll

Testa dina kunskaper om begreppen i Tailwind CSS Mastery från den här lektionen.

Besvara frågan i den interaktiva lektionen

Sammanfattning av lektionen

I den här lektionen lärde du dig: mäta CSS-bundlestorlek med produktionsbygget, --minify och wc -c samt granskning av gzip; begränsa content-globs för att förhindra att JIT skannar node_modules eller output-kataloger; och granska safelisten för att säkerställa att mönstren är snäva och endast täcker genuint dynamiska användningsfall för klasser. Härnäst utforskar vi godtyckliga värden och deras kostnad.

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 ”Analysera och minska paketstorleken” gratis?

Ja – hela texten till ”Analysera och minska paketstorleken” 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 ”Analysera och minska paketstorleken”?

Mät storleken på den slutliga CSS-utdata, identifiera oanvända stilar som slinker igenom och finjustera era content-globs för maximal effektivitet vid rensning. 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 3 av 4.

Hur lång tid tar lektionen ”Analysera och minska paketstorleken”?

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