Tailwind CSS Academy · Les

Bundelgrootte analyseren en verkleinen

Meet de grootte van uw uiteindelijke CSS-output, identificeer ongebruikte stijlen die toch worden opgenomen en stem uw content-globs af voor maximale purge-efficiëntie.

Les 3 van 413 stappen

Bundelgrootte analyseren en verkleinen is een gratis Tailwind CSS Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Tailwind CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.

Waarom bundelgrootte ook met JIT belangrijk blijft

De JIT-engine van Tailwind verwijdert automatisch de meeste ongebruikte CSS, maar de bundel kan nog steeds groeien als je niet zorgvuldig te werk gaat. Een onjuist geconfigureerde content-glob kan te veel bestanden bevatten, een grote safelist kan honderden klassen toevoegen en complexe arbitraire waarden kunnen de uitvoer groter maken.

Zelfs een goed geconfigureerd Tailwind-project heeft baat bij een periodieke controle van de bundel om te bevestigen dat de uitvoer zo klein is als verwacht en om configuratieproblemen op te sporen voordat ze productie bereiken.

De grootte van je CSS-uitvoer meten

De eerste stap bij het analyseren van je bundel is weten wat de huidige grootte ervan is. Bouw je Tailwind-CSS in productiemodus en controleer de bestandsgrootte vóór en na minificatie en compressie.

Gebruik wc -c om het aantal onbewerkte bytes te controleren en vergelijk dat met de gegzipte grootte, want die is wat browsers daadwerkelijk downloaden. Een goed geoptimaliseerde Tailwind-stylesheet voor productie is doorgaans 5–15 KB zonder compressie en 2–5 KB gegzipt.

# 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

De dekking van content-globs controleren

De meest voorkomende oorzaak van te grote Tailwind-uitvoer is een te brede content-glob die te veel bestanden scant, waaronder meegeleverde bibliotheken of gegenereerde uitvoerbestanden die toevallig tekenreeksen bevatten die op CSS-klassen lijken.

Als je per ongeluk node_modules/** of je map met gecompileerde uitvoer opneemt, kan JIT duizenden overbodige klassen genereren. Controleer elke glob in je array content en zorg ervoor dat die alleen je daadwerkelijke bron-sjablonen omvat.

// 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}',
  ],
};

Controleren met PurgeCSS-rapporten

Je kunt PurgeCSS in de analysemode gebruiken (los van de ingebouwde scan van Tailwind) om een rapport te genereren van welke CSS-selectors behouden blijven en welke zouden worden verwijderd. Zo kun je onverwachte klassen in je uitvoer identificeren.

Je kunt ook in je gecompileerde CSS-bestand zoeken naar klassenpatronen die er niet in horen te staan. Zie je honderden varianten van bg-, waaronder kleuren die je nooit gebruikt, controleer dan je safelistpatronen. Mogelijk genereren ze meer klassen dan bedoeld.

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

Overmatige groei van de safelist opsporen

Een grote of brede safelist is een veelvoorkomende oorzaak van een te grote bundel. Elk patroon genereert veel klassen. /bg-(red|green|blue|yellow|purple|orange|pink|indigo|violet|teal|cyan|rose)-(50|100|200|300|400|500|600|700|800|900|950)/ genereert bijvoorbeeld alleen al 132 klassen voor achtergrondkleuren, zelfs als je er maar 10 gebruikt.

Controleer je safelist door de patronen te tellen en te schatten hoeveel klassen elk patroon genereert. Verwijder patronen die je bij wijze van proef hebt toegevoegd en bewaar alleen patronen voor bekende gevallen waarin dynamische klassen worden gebruikt.

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

Ongebruikte basisstijlen verwijderen

Tailwinds preflight (de basisreset van CSS) voegt ongeveer 4 KB aan basisstijlen toe. Als je Tailwind gebruikt naast een CSS-framework met een eigen reset, of als je Tailwind stap voor stap invoert, wil je preflight mogelijk uitschakelen.

Stel corePlugins: { preflight: false } in je configuratie in om de reset te verwijderen. Dit kan enkele KB's besparen, vooral in projecten waar de basisstijlen conflicteren met bestaande 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
  },
}

Ongebruikte coreplugins uitschakelen

Je kunt volledige groepen hulpprogramma's uitschakelen die je project nooit gebruikt, zodat de gegenereerde CSS kleiner wordt. Een project zonder gebruik van CSS Grid kan bijvoorbeeld de Grid-plug-ins uitschakelen. Een project zonder transformaties kan rotate, scale, skew en translate uitschakelen.

Controleer je sjablonen op voorvoegsels van hulpprogramma's die je nooit gebruikt. Als je een kernplug-in uitschakelt, worden alle varianten van die hulpprogramma's niet gegenereerd, zelfs als ze toch in de inhoudsscan voorkomen (bijvoorbeeld door sjabloontekenreeksen die op klassennamen lijken).

// 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,
  },
}

CSS-compressie inschakelen

Stel naast Tailwinds eigen verkleining (--minify) je bouwprogramma zo in dat het aanvullende CSS-compressie toepast. Zowel Vite als webpack ondersteunen CSS-verkleining via hun ingebouwde pijplijnen of via pijplijnen op basis van plug-ins.

Combineer voor maximale compressie CSS-verkleining met Brotli-compressie op serverniveau. Brotli bereikt bij CSS-bestanden een 15-25% betere compressie dan gzip, waardoor de effectieve hoeveelheid gegevens die je verstuurt verder afneemt.

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

Ongebruikte JavaScript verwijderen uit Tailwind-projecten

In React- en Vue-projecten verwijdert tree-shaking ongebruikte JavaScript, maar het beïnvloedt ook hoe klassen JIT bereiken. Als een component door tree-shaking uit de bundel wordt verwijderd, komen de bijbehorende klassentekenreeksen mogelijk niet voor in de gecompileerde JavaScript, waardoor JIT ze mist.

De oplossing is je inhoudspatronen zo in te stellen dat ze verwijzen naar bronbestanden (vóór tree-shaking), niet naar gecompileerde uitvoer. JIT moet altijd je bronbestanden in TypeScript en JavaScript scannen, niet de gecompileerde bundel.

// 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
  ],
}

Bundelgrootte in de loop van de tijd analyseren

De bundelgrootte groeit meestal geleidelijk wanneer functies worden toegevoegd. Stel een CI-controle in die bij elke pull request de grootte van de CSS-bundel meet en faalt als die een drempel overschrijdt. Zo ontdek je onbedoelde uitbreidingen van de safelist of te brede toevoegingen aan patronen voordat ze productie bereiken.

Hulpprogramma's zoals bundlesize, size-limit of een eenvoudig bash-script dat bestandsgroottes vergelijkt, kunnen in je CI-pijplijn worden geïntegreerd om groottelimieten af te dwingen.

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

Laatste optimalisatiecontrolelijst

Loop deze controlelijst door voordat je een Tailwind-project naar productie brengt:

NODE_ENV=production is ingesteld tijdens het bouwen
Inhoudspatronen bevatten niet op brede wijze node_modules
Safelijstpatronen zijn beperkt en gedocumenteerd
Ongebruikte kernplug-ins zijn uitgeschakeld in de configuratie
CSS is verkleind (de Tailwind-optie --minify of het bouwprogramma)
Compressie op de server (gzip of Brotli) is ingeschakeld
De grootte van het CSS-bestand blijft onder je doelbudget (meestal 15 KB zonder compressie)

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

Korte controle

Test je begrip van de concepten uit Tailwind CSS Mastery in deze les.

Beantwoord dit in de interactieve les

Samenvatting van de les

In deze les heb je geleerd hoe je de grootte van een CSS-bundel meet met de productie-build, --minify en wc -c, aangevuld met controle van gzip; hoe je het bereik van inhoudspatronen afbakent om te voorkomen dat JIT node_modules of uitvoermappen scant; en hoe je een safelist controleert om te garanderen dat patronen beperkt blijven en alleen echt dynamisch gebruik van klassen afdekken. Hierna behandelen we willekeurige waarden en hun kosten.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 30
Lessen: 120

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Bundelgrootte analyseren en verkleinen” gratis?

Ja — de volledige tekst van “Bundelgrootte analyseren en verkleinen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Tailwind CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.

Wat leer ik in “Bundelgrootte analyseren en verkleinen”?

Meet de grootte van uw uiteindelijke CSS-output, identificeer ongebruikte stijlen die toch worden opgenomen en stem uw content-globs af voor maximale purge-efficiëntie. Je oefent met Tailwind CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Tailwind CSS Academy te beginnen?

Ervaring vooraf is niet nodig. Tailwind CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Bundelgrootte analyseren en verkleinen”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Tailwind CSS Academy?

Ja. Elke les over Tailwind CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

Hoe de JIT-engine werkt
Dynamische classes op de safelist zetten
Bundelgrootte analyseren en verkleinen
Arbitraire waarden en hun kosten

← Terug naar Tailwind CSS Academy