Tailwind CSS Academy · leksjon

Kontrollere CSS-resultatet

Bruk verktøy som PurgeCSS-rapporter og pakk分析atorer til å undersøke hvilke Tailwind-klasser som kom med i produksjonsbygget, og hvorfor.

Leksjon 1 av 413 trinn

Kontrollere CSS-resultatet er en gratis leksjon i Tailwind CSS Academy på CoddyKit. Dette er leksjon 1 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 Tailwind CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.

Hvorfor du bør kontrollere CSS-utdataene

Selv om Tailwinds JIT-motor fjerner ubrukte stiler, kan CSS-pakken i produksjon vokse uventet. Kontroll av CSS-utdataene innebærer å undersøke den endelig kompilerte filen for å forstå hva som kom med, hvor stor den er, og om noe unødvendig slapp gjennom. Et slankt stilark lastes inn og analyseres raskere og gir bedre resultater i Core Web Vitals.

Måling av pakkestørrelsen

Den enkleste kontrollen starter med å måle filstørrelsen. Når du har bygget prosjektet, sjekker du størrelsen på den genererte CSS-filen. Gzip-størrelsen er tallet som betyr noe for ytelsen i praksis, fordi nettlesere dekomprimerer innholdet fortløpende. Et godt optimalisert Tailwind-utdata er vanligvis 5–15 KB gzip-komprimert for de fleste prosjekter.

# Build and check output size
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify
ls -lh ./dist/output.css
gzip -k ./dist/output.css && ls -lh ./dist/output.css.gz

Bruk av Tailwind CLI i overvåkingsmodus

Under utvikling kan du kjøre Tailwind i overvåkingsmodus, slik at stilarket bygges på nytt ved hver filendring. Dette gir deg tilbakemelding i sanntid på hvordan nye klasser påvirker størrelsen på utdataene. Bruk flagget --minify når du måler størrelsen, slik at du får produksjonsnære tall i stedet for tall fra utviklingsbygget.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
# In another terminal, measure:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

Undersøke utdatafilen

Åpne den kompilerte CSS-filen og søk etter klassenavn du mistenker kan være unødvendige. Hvis du ser hundrevis av animasjonsnøkkelbilder du aldri bruker, eller en hel fargepalett for en farge du bare refererer til én gang, er dette kandidater for fjerning. Bruk tekstsøk etter innholdsmønstrene dine for å bekrefte at de samsvarer med de riktige filene.

/* Example: search compiled output for unexpected classes */
/* grep 'animate-bounce' ./dist/output.css */
/* grep 'rose-' ./dist/output.css | wc -l */

Kontrollere at innholdsbanene er riktige

Den vanligste kilden til unødvendig størrelse er feilkonfigurerte innholdsbaner. Hvis innholdsarrayet er for bredt, skanner Tailwind filer som ikke skal skannes, og finner klasselignende strenger i byggeartefakter, testdata eller tredjepartsbiblioteker. Hvis det er for smalt, blir reelle klasser fjernet fra produksjonen. Kontroller innholdsarrayet først.

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    // AVOID: './node_modules/**/*' — scans too much
  ],
};

Visualisering med PurgeCSS-statistikk

PurgeCSS kan kjøres som et frittstående verktøy for å analysere hvilke selektorer i stilarket som samsvarer med HTML-filene dine, og hvilke som ikke gjør det. Selv om Tailwind har innebygd fjerning av ubrukte stiler, gir separat kjøring av PurgeCSS deg en detaljert rapport over avviste selektorer som viser nøyaktig hvilke klasser som overlevde, og hvilke som ble fjernet.

# Install PurgeCSS globally for analysis
npm install -g purgecss

# Run analysis against your build output and HTML files
purgecss --css dist/output.css --content 'src/**/*.html' --output /tmp/purged.css
ls -lh /tmp/purged.css

Bruke pakkeanalysatorer for CSS

Verktøy som Statoscope, webpack-bundle-analyzer eller Next.js sin innebygde modus ANALYZE=true visualiserer hele pakken, inkludert CSS-filer. De viser et treemap over hva som tar opp plass, noe som gjør det enkelt å oppdage uventede grupper av Tailwind-klasser som bruker en uforholdsmessig stor del av byteantallet.

# Next.js bundle analysis
npm install @next/bundle-analyzer

# next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer({});

Identifisere dynamisk konstruerte klasser

En mer subtil kilde til unødvendig størrelse er dynamisk konstruerte klassenavn som JIT oppdager som strenger og inkluderer, selv om de aldri brukes under kjøring. Hvis du for eksempel bygger en klasse fra en variabel som 'text-' + color, tvinger dette deg til å legge mange kombinasjoner til safelisten. Foretrekk fullstendige klassenavn i markeringen i stedet.

<!-- BAD: JIT cannot detect dynamic construction reliably -->
<!-- class="text-" + color + "-500" -->

<!-- GOOD: Write complete class names -->
<div class="text-red-500">Red</div>
<div class="text-blue-500">Blue</div>
<div class="text-green-500">Green</div>

Kontrollere safelist-oppføringer

Hvis du har lagt til en safelist i konfigurasjonen, bør du kontrollere oppføringene med jevne mellomrom. Safelist-elementer inkluderes alltid, uavhengig av om de finnes i innholdet som skannes. Over tid hoper safe-listede klasser fra gamle funksjoner seg opp og legger byte til hvert produksjonsbygg, selv etter at funksjonen er fjernet.

// tailwind.config.js
module.exports = {
  safelist: [
    // Audit these regularly — remove anything no longer needed
    'bg-red-500',
    'bg-green-500',
    {
      pattern: /bg-(red|green|blue)-(100|500|900)/,
    },
  ],
};

Sammenligne bygg over tid

Behandle størrelsen på CSS-utdataene som en målt metrikk i CI-pipelinen. Etter hvert bygg logger du gzip-størrelsen til en fil eller et dashbord. Når størrelsen øker uventet mellom to commits, kan du bruke bisect på de nylige endringene for å finne årsaken. Mange team setter en størrelsesgrense og lar bygget feile når den overskrides.

# Simple CI size budget check (shell script)
SIZE=$(wc -c < dist/output.css)
BUDGET=20000  # 20 KB uncompressed
if [ "$SIZE" -gt "$BUDGET" ]; then
  echo "CSS budget exceeded: $SIZE bytes (limit: $BUDGET)"
  exit 1
fi
echo "CSS size OK: $SIZE bytes"

Fjerne ubrukte offisielle programtillegg

Offisielle Tailwind-programtillegg som @tailwindcss/typography og @tailwindcss/forms legger til hundrevis av regler når de er aktivert. Hvis du ikke bruker Prose-innhold eller stylede skjemaelementer, bør du fjerne programtillegget fra konfigurasjonen. Hvert programtillegg du fjerner, sparer en betydelig mengde byte i den endelige pakken.

// BEFORE: both plugins always included
plugins: [
  require('@tailwindcss/typography'),
  require('@tailwindcss/forms'),
],

// AFTER: only include what you actually use
plugins: [
  // require('@tailwindcss/typography'), // removed — not using prose
  require('@tailwindcss/forms'),
],

Hurtigsjekk

Test forståelsen din av Tailwind CSS Mastery-konseptene fra denne leksjonen.

Besvar den i den interaktive leksjonen

Oppsummering av leksjonen

I denne leksjonen lærte du å bruke gzip-størrelse som den viktigste produksjonsmetrikk, kontrollere innholdsbaner for å forhindre at for mange eller for få filer skannes, og fjerne ubrukte programtillegg og safelist-oppføringer for å holde pakken slank. Neste gang utforsker vi sortering av klasser med Prettier-programtillegget.

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: 30
Leksjoner: 120

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Kontrollere CSS-resultatet» gratis?

Ja – hele teksten i «Kontrollere CSS-resultatet» 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 Tailwind CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Kontrollere CSS-resultatet»?

Bruk verktøy som PurgeCSS-rapporter og pakk分析atorer til å undersøke hvilke Tailwind-klasser som kom med i produksjonsbygget, og hvorfor. Du øver på Tailwind CSS 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 Tailwind CSS Academy?

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

Hvor lang tid tar leksjonen «Kontrollere CSS-resultatet»?

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 Tailwind CSS Academy-leksjonen?

Ja. Alle Tailwind CSS 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

← Tilbake til Tailwind CSS Academy