Content-polut ja käyttämättömien luokkien poisto
Määrittäkää content-taulukko oikein, jotta Tailwind käy läpi kaikki tiedostot ja poistaa käyttämättömät luokat tuotantoversioista.
Content-polut ja käyttämättömien luokkien poisto on ilmainen Tailwind CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Tailwind CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Miksi karsiminen on tärkeää
Tailwind CSS luo utility-luokat kaikille teeman arvojen yhdistelmille — mahdollisesti satojatuhansia luokkia. Ilman karsimista raaka CSS-tuloste olisi useita megatavuja. Purging-prosessissa, jota kutsutaan virallisesti sisällön skannaukseksi tai tree-shakingiksi, poistetaan kaikki lähdetiedostoissa esiintymättömät luokat. Näin tuotannon CSS pienenee yleensä vain 5–50 kilotavuun. Sisältömääritysten tekeminen oikein on olennaista kevyen koontiversion kannalta.
Miten sisällön skannaus toimii
Tailwind skannaa content-taulukossa luetellut tiedostot ja etsii merkkijonokuvioita, jotka näyttävät Tailwind-luokkien nimiltä. Se ei suorita koodiasi, vaan tekee yksinkertaisen tekstihakun. Kaikki tunnettuja utility-luokkia vastaavat merkkijonot sisällytetään tulosteeseen. Siksi luokkien nimiä ei saa koskaan muodostaa dynaamisesti merkkijonoja yhdistämällä: skanneri ei löydä koko luokan nimeä.
// 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 bothContent glob -kuvioiden kirjoittaminen
content-taulukon glob-kuviot käyttävät tavallista glob-syntaksia. Kaksi tähteä ** vastaa mitä tahansa määrää hakemistotasoja. Aaltosulkeet {} vastaavat useita tiedostopäätteitä. Ole mahdollisimman täsmällinen — vältä liian laajoja kuvioita, kuten ./**/*, sillä ne hidastavat skannausta ottamalla mukaan esimerkiksi kuvia ja JSON-tiedostoja, jotka eivät voi sisältää luokkien nimiä.
// 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',
],
};Suosittujen frameworkien content-määritykset
Eri frameworkit järjestävät tiedostonsa eri tavoin. Seuraavassa ovat oikeat content-kuviot suosituimmille kokoonpanoille. Next.js tarvitsee app/- ja pages/-hakemistot. Vue-projekteissa käytetään yleensä .vue-tiedostoja. Laravelin Blade-mallit sijaitsevat resources/views/-hakemistossa. Tarkista aina, että lähtötiedostosi, kuten index.html tai layout-tiedostot, on sisällytetty erikseen, jos ne sijaitsevat glob-kuvioiden ulkopuolella.
// 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']safelist-asetus
Joskus luokat muodostetaan ajonaikaisesti, eikä staattinen skannaus pysty havaitsemaan niitä — esimerkiksi kun luokkien nimet muodostetaan CMS-sisällöstä, käyttäjän syötteestä tai API-vastauksista. Käytä safelist-asetusta pakottaaksesi tietyt luokat tai kuviot mukaan tulosteeseen. Näin ne sisältyvät siihen aina riippumatta siitä, löytääkö skanneri niitä. Safelistissä voi määrittää yksittäisiä merkkijonoja tai säännöllisiä lausekkeita.
// 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'],
},
],
};blocklist-asetus
blocklist-asetus on safelistin vastakohta: se estää tiettyjen luokkien sisällyttämisen tulosteeseen, vaikka skanneri löytäisi ne lähdekoodista. Tästä on hyötyä tiimin käytäntöjen valvonnassa, esimerkiksi vanhentuneiden utility-nimien käytön estämisessä, tai tulosteen koon pienentämisessä sulkemalla nimenomaisesti pois utility-luokat, joita tiedät, ettet tule käyttämään, kuten tietyt fonttikoko- tai animaatioluokat.
// tailwind.config.js
module.exports = {
blocklist: [
// Prevent these classes from being generated
'container',
'prose',
'animate-bounce',
],
};Sisällön muuntajat
Jos tiedostot on esikäsiteltävä ennen skannausta — esimerkiksi .pug-mallit, .md-tiedostot tai mukautetut template-enginet — Tailwindin content.transform-asetuksella voit antaa funktion, joka muuntaa tiedoston raakasisällön luokkien nimiä sisältäväksi merkkijonoksi. Tätä tarvitaan harvoin, mutta se on hyödyllinen erikoistapauksissa, joissa tiedostomuoto piilottaa luokkien nimet epäselvällä tavalla.
// 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);
},
},
},
};Komponenttikirjastojen sisällön poiminta
Jos projektisi käyttää kolmannen osapuolen komponenttikirjastoa, joka toimittaa valmiiksi käännettyä JavaScriptiä upotettuine Tailwind-luokkineen, kirjaston dist-tiedostot on sisällytettävä content-taulukkoon. Monet suositut Tailwind-komponenttikirjastot, kuten Flowbite, daisyUI ja mukautetut sisäiset kirjastot, toimivat näin. Lisää niiden käännetyn JavaScript-tulosteen polku, jotta skanneri voi havaita, mitä luokkia ne käyttävät.
// 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}',
],
};Content-määrityksen tarkistaminen
Varmista content-määrityksen toimivuus suorittamalla npx tailwindcss build ja tarkistamalla tulostetiedoston koko. Hyvin määritetyn tuotantokoontiversion pitäisi olla alle 50 kilotavua, usein huomattavasti pienempi. Voit kehityksen aikana suorittaa Tailwind CLI:n myös --watch-lipulla nähdäksesi käännöksen reaaliajassa ja varmistaaksesi, että uuden luokan lisääminen näkyy heti tulosteessa.
# 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 --watchJIT ja luokkien luominen tarpeen mukaan
Tailwind v3 käyttää oletusarvoisesti Just-In-Time (JIT) -moottoria. Toisin kuin vanha PurgeCSS-lähestymistapa, JIT luo luokat tarpeen mukaan kirjoittaessasi niitä ja skannaa sisältötiedostojasi reaaliajassa kehityksen aikana. Kehityksen CSS on siis jo valmiiksi pieni ja vastaa täsmälleen tuotantoversiota — v3:ssa ei ole erillistä karsintavaihetta. content-taulukkoa käytetään sekä kehityksen aikaiseen skannaukseen että tuotannon optimointiin.
Yleiset content-määritysten virheet
Yleisin virhe on tiedostojen puuttuminen content-taulukosta — näissä tiedostoissa käytetyt luokat karsitaan pois tuotannossa. Toinen virhe on dynaaminen luokkien muodostaminen, jossa koko luokan nimeä ei koskaan esiinny merkkijonona. Kolmas ongelma on mallitiedostojen unohtaminen muissa kuin JavaScript-frameworkeissa. Testaa tuotantokoontiversiosi aina paikallisesti asetuksella NODE_ENV=production, jotta havaitset karsintaan liittyvät ongelmat ennen käyttöönottoa.
// 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}'
]Pikatarkistus
Testaa, miten hyvin ymmärrät Tailwindin content-polut ja luokkien karsimisen.
Oppitunnin kertaus
Tässä oppitunnissa opit, että content-taulukko kertoo Tailwindille, mistä tiedostoista luokkien nimiä etsitään, koko luokkien nimen on aina esiinnyttävä kirjaimellisena merkkijonona, jotta skanneri voi havaita sen, ja safelist-asetus pakottaa staattisesti havaitsemattomat luokat mukaan. Seuraavaksi tutustumme Tailwind-teeman laajentamisen ja korvaamisen eroon.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Content-polut ja käyttämättömien luokkien poisto” ilmainen?
Kyllä – oppitunnin ”Content-polut ja käyttämättömien luokkien poisto” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Tailwind CSS Academy-kurssin, päivitä CoddyKit PROhon. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Content-polut ja käyttämättömien luokkien poisto”?
Määrittäkää content-taulukko oikein, jotta Tailwind käy läpi kaikki tiedostot ja poistaa käyttämättömät luokat tuotantoversioista. Harjoittelet Tailwind CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Tailwind CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Tailwind CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Content-polut ja käyttämättömien luokkien poisto”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Tailwind CSS Academy-oppitunnilla?
Kyllä. Jokainen Tailwind CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- tailwind.config.js-tiedoston rakenne
- Content-polut ja käyttämättömien luokkien poisto
- Teeman laajentaminen ja ohittaminen
- Lisäosien lisääminen ja määrittäminen