Content-stier og oprydning

Tailwind CSS genererer utility-klasser for alle kombinationer af dine temaværdier — potentielt hundredtusindvis af klasser. Uden beskæring ville den rå CSS-output fylde flere megabyte. Processen med at fjerne ubrugte klasser (officielt kaldet scanning af indhold eller tree-shaking) fjerner alle klasser, der ikke optræder i dine kildefiler, og reducerer typisk produktions-CSS til blot 5–50 KB. Det er afgørende for et effektivt build, at din indholdskonfiguration er korrekt.

Tailwind scanner de filer, du angiver i arrayet content, og søger efter tekstmønstre, der ligner Tailwind-klassenavne. Den kører ikke din kode — den foretager en simpel tekstsøgning. Alle tekststrenge, der matcher en kendt utility-klasse, medtages i outputtet. Derfor må du aldrig konstruere klassenavne dynamisk ved at sammenkæde tekststrenge; scanneren finder ikke det fulde klassenavn.

Glob-mønstre i arrayet content bruger standard-g||||syntax. Dobbeltstjernen ** matcher et vilkårligt antal mappeniveauer. Tuborgklammer {} matcher flere filendelser. Vær så specifik som muligt — undgå mønstre, der er for brede (som ./**/*), da de gør scanningen langsommere ved at medtage filer som billeder og JSON, der ikke kan indeholde klassenavne.

Forskellige frameworks organiserer deres filer på forskellige måder. Her er de korrekte indholdsmønstre til de mest populære opsætninger. Next.js kræver mapperne app/ og pages/. Vue-projekter bruger typisk .vue-filer. Laravels Blade-skabeloner ligger i resources/views/. Kontrollér altid, at dine indgangsfiler (som index.html eller layoutfiler) er inkluderet eksplicit, hvis de ligger uden for dine glob-mønstre.

Nogle gange konstrueres klasser ved kørsel, så de ikke kan registreres ved statisk scanning — for eksempel klassenavne, der bygges ud fra CMS-indhold, brugerinput eller API-svar. Brug indstillingen safelist til at tvinge bestemte klasser eller mønstre med i outputtet, så de altid er til stede, uanset om scanneren finder dem. Du kan angive individuelle tekststrenge eller regex-mønstre i safelist.

Indstillingen blocklist er det modsatte af safelist — den forhindrer bestemte klasser i at blive inkluderet i outputtet, selv hvis scanneren finder dem i din kilde. Det er nyttigt til at håndhæve teamets konventioner (forhindre brug af forældede utility-navne) eller reducere outputstørrelsen ved eksplicit at udelukke utilities, som du ved aldrig vil bruge, f.eks. bestemte skriftstørrelser eller animationsklasser.

For filer, der skal forbehandles før scanning — som .pug-skabeloner, .md-filer eller tilpassede skabelonmotorer — giver Tailwinds indstilling content.transform dig mulighed for at angive en funktion, der omdanner det rå filindhold til en tekststreng med klassenavne. Det er sjældent nødvendigt, men effektivt i særlige tilfælde, hvor filformatet skjuler klassenavne på en ikke-indlysende måde.

Hvis dit projekt bruger et tredjeparts-komponentbibliotek, der leverer forudbygget JavaScript med indlejrede Tailwind-klasser, skal du inkludere bibliotekets dist-filer i dit content-array. Mange populære Tailwind-komponentbiblioteker (som Flowbite, daisyUI eller tilpassede interne biblioteker) fungerer på denne måde. Tilføj stien til deres byggede JavaScript-output, så scanneren kan registrere, hvilke klasser de bruger.

For at bekræfte, at din indholdskonfiguration fungerer korrekt, skal du køre npx tailwindcss build og kontrollere outputfilens størrelse. Et produktions-build med en velfungerende konfiguration bør være under 50 KB (ofte betydeligt mindre). Du kan også køre Tailwind CLI med flaget --watch under udvikling for at se kompileringen i realtid og kontrollere, at en ny klasse straks vises i outputtet.

Tailwind v3 bruger som standard en Just-In-Time (JIT)-motor. I modsætning til den gamle PurgeCSS-tilgang genererer JIT klasser efter behov, mens du skriver dem, og scanner dine indholdsfiler i realtid under udviklingen. Det betyder, at din udviklings-CSS allerede er lille og matcher produktionen nøjagtigt — der er ikke noget separat trin til fjernelse af ubrugte klasser i v3. Arrayet content bruges både til scanning under udvikling og optimering i produktionen.

Den mest almindelige fejl er manglende filer i arrayet content — klasser fra disse filer fjernes i produktionen. En anden fejl er dynamisk konstruktion af klasser, hvor det fulde klassenavn aldrig optræder som en tekststreng. Et tredje problem er glemte skabelonfiler i frameworks, der ikke bruger JavaScript. Test altid dit produktions-build lokalt med NODE_ENV=production for at opdage problemer med fjernelse af ubrugte klasser, før du implementerer.

I denne lektion lærte du, at content-arrayet fortæller Tailwind, hvilke filer der skal scannes efter klassenavne, at fulde klassenavne altid skal optræde som tekststrenge, for at scanneren kan registrere dem, og at indstillingen safelist tvinger klasser med, som ikke kan registreres statisk. Dernæst ser vi på forskellen mellem at udvide og tilsidesætte Tailwind-temaet.