Tailwind CSS Academy · Oppitunti

Dynaamisten luokkien sallittujen luokkien luettelo

Käyttäkää tailwind.config.js-tiedoston safelist-asetusta varmistaaksenne, että JIT:n staattisesti havaitsemattomat dynaamisesti muodostetut luokkien nimet sisällytetään aina.

Oppitunti 2/413 vaihetta

Dynaamisten luokkien sallittujen luokkien luettelo 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.

Safelist-ongelma

JIT:n staattinen tarkistus on useimmissa tapauksissa vahvuus, mutta se aiheuttaa haasteen, kun luokkien nimet määräytyvät ajonaikaisesti esimerkiksi tietokannasta, API-vastauksesta tai käyttäjän väriasetuksista. Tällaiset dynaamisesti määräytyvät luokkien nimet eivät esiinny lähdetiedostoissanne kokonaisina merkkijonoina, joten JIT ei luo niitä.

tailwind.config.js-tiedoston safelist on virallinen ratkaisu: määritätte siinä eksplisiittisesti luokat (tai kuviot), jotka JIT:n on aina luotava riippumatta siitä, esiintyvätkö ne templaattitiedostoissanne.

Safelistin perusmääritys

Lisätkää safelist-taulukko tiedostoon tailwind.config.js. Luetelkaa siinä kaikki kokonaiset luokkien nimet, joita JIT ei pysty tunnistamaan staattisesti. JIT luo CSS:n aina jokaiselle tässä taulukossa olevalle luokalle, vaikka se ei löytäisi luokkia sisältötiedostoistanne.

Tämä on safelistiin lisäämisen yksinkertaisin muoto – yksittäiset luokkien nimet. Se sopii hyvin pienelle määrälle tunnettuja dynaamisia luokkia.

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,ts}'],
  safelist: [
    'bg-red-500',
    'bg-green-500',
    'bg-blue-500',
    'bg-yellow-500',
    'text-white',
    'text-gray-900',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Kuvioihin perustuva safelist

Kun dynaamisia arvoja on kokonaisella väriasteikolla, jokaisen yksittäisen luokan luetteleminen on työlästä. Käyttäkää sen sijaan safelistissä kuvio-objektia, jossa määritetään regex-kuvio. JIT luo kaikki kuvioon täsmäävät luokat.

Jos haluatte esimerkiksi luoda kaikki hälytystasojen (punainen, vihreä, keltainen, sininen) taustavärit sävyillä 100 ja 700, voitte käyttää kuviota, joka vastaa täsmälleen näitä yhdistelmiä.

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  safelist: [
    // Generate all bg-* text-* combinations for status colors
    {
      pattern: /bg-(red|green|blue|yellow|purple)-(100|500|700)/,
    },
    {
      pattern: /text-(red|green|blue|yellow|purple)-(700|800|900)/,
    },
    {
      pattern: /border-(red|green|blue|yellow|purple)-(300|500)/,
    },
  ],
  theme: {
    extend: {},
  },
}

Varianttien luominen kuvioilla

Kuvioihin perustuva safelist tukee myös varianttien luomista perusluokan rinnalle. Lisäämällä variants-taulukon kuvio-objektiin voitte ottaa mukaan hover-, focus-, dark- ja responsiiviset variantit.

Tämä on olennaista, kun dynaamisesti määräytyvää luokkaa käytetään vuorovaikutteisissa elementeissä. Esimerkiksi tietokantakentän perusteella väriä vaihtavan tilatunnisteen hover-tila on luotava myös silloin, kun tunniste on napsautettava painike.

// tailwind.config.js
module.exports = {
  safelist: [
    {
      pattern: /bg-(red|green|blue|yellow)-(100|200|500|600)/,
      variants: ['hover', 'focus', 'dark', 'dark:hover'],
    },
    {
      pattern: /text-(red|green|blue|yellow)-(600|700|800)/,
      variants: ['hover', 'dark'],
    },
  ],
}

Milloin safelistia kannattaa käyttää

Safelistin tulisi olla viimeinen keino, ei ensimmäinen ratkaisu. Ennen safelistin käyttöä harkitkaa seuraavia vaihtoehtoja:

Arvojen yhdistäminen kokonaisiin luokkamerkkijonoihin JavaScript-objektissa – siistein ratkaisu
Inline-tyylit todella mielivaltaisille ajonaikaisille arvoille, kuten käyttäjän valitsemille heksaväreille
CSS-muuttujat yhdessä kiinteän Tailwind-luokan kanssa, joka viittaa muuttujaan

Safelistin liikakäyttö kumoaa JIT:n tarkoituksen ja voi palauttaa suurten CSS-tiedostojen ongelman.

// Preferred: map values to complete class strings
const statusClasses = {
  success: 'bg-green-100 text-green-800 border-green-300',
  error:   'bg-red-100 text-red-800 border-red-300',
  warning: 'bg-yellow-100 text-yellow-800 border-yellow-300',
  info:    'bg-blue-100 text-blue-800 border-blue-300',
};

// Usage in template:
// class={statusClasses[status]}
// JIT detects all four strings statically — no safelist needed!

Inline-tyylit todella dynaamisille arvoille

Kun arvo on ajonaikaisesti todella mielivaltainen – esimerkiksi tietokantaan tallennettu käyttäjän mukautettu brändiväri – inline-tyylit ovat oikea työkalu. Tailwind-utilityt vastaavat suunnitteluasteikon kiinteitä arvoja, kun taas inline-tyylit voivat vastaanottaa minkä tahansa lasketun arvon.

Käyttäkää Tailwindia asetteluun ja rakenteeseen ja inline-tyylejä siihen yhteen todella dynaamiseen arvoon. Näin 99 % tyyleistänne pysyy Tailwindissa, ja inline-tyylit rajoittuvat tiettyyn dynaamiseen tapaukseen.

<!-- User's custom brand color from database -->
<div
  class="px-6 py-4 rounded-xl font-semibold text-white"
  style="background-color: {{ user.brandColor }}">
  Custom Brand Header
</div>

<!-- The layout, padding, rounding, and text color all use Tailwind utilities -->
<!-- Only the dynamic database value uses inline style -->
<!-- This keeps the JIT stylesheet small and Tailwind responsible for design scale -->

<!-- CSS variable approach (also good):
<style> :root { --brand: {{ user.brandColor }}; } </style>
<div class="bg-[var(--brand)] px-6 py-4 rounded-xl text-white">...</div>
-->

CSS-muuttujat dynaamisina arvoina

Tehokas tekniikka on asettaa CSS-muuttuja dynaamiseen arvoon ja viitata siihen Tailwindin mielivaltaisen arvon syntaksilla: bg-[var(--brand-color)]. Luokkamerkkijono bg-[var(--brand-color)] on kokonainen staattinen merkkijono, jonka JIT pystyy tunnistamaan ja jolle se voi luoda CSS:n.

CSS-muuttujan arvo päivitetään sitten dynaamisesti JavaScriptillä tai ylätason elementin inline-tyyleillä, samalla kun luokka pysyy kiinteänä templatessa.

<!-- Static class referencing a CSS variable -->
<div
  id="card"
  class="bg-[var(--card-bg)] text-[var(--card-text)] px-6 py-4 rounded-xl">
  Dynamically colored card
</div>

<script>
  // Update the CSS variable dynamically
  const card = document.getElementById('card');
  card.style.setProperty('--card-bg', '#1a1a2e');
  card.style.setProperty('--card-text', '#e0e0e0');

  // The class 'bg-[var(--card-bg)]' is a static string
  // JIT generates it because it appears literally in the HTML
</script>

Safelist monorepossa tai komponenttikirjastossa

Kun rakennatte komponenttikirjastoa, jota muut projektit käyttävät, kirjaston komponenttien luokat on sisällytettävä käyttävän projektin JIT-tarkistukseen. Sisällyttäkää kirjaston lähdekoodi käyttäjän konfiguraation content-taulukkoon tai käyttäkää preset-määritystä, joka sisältää safelistin.

Jos kirjasto sisältää käännettyä JavaScriptiä (ei HTML-lähdekoodia), lisätkää paketin polku käyttäjän content-globiin ja kohdistakaa se käännettyihin JS-tiedostoihin, joissa luokkamerkkijonot ovat edelleen kirjaimellisina merkkijonoina.

// Consumer project's tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,ts,tsx}',
    // Include the UI library's compiled files so JIT finds its classes
    './node_modules/@my-company/ui/**/*.{js,ts}',
  ],
  safelist: [
    // Or explicitly list classes the library uses dynamically
    {
      pattern: /bg-(blue|red|green|gray)-(50|100|500|600|700)/,
    },
  ],
}

Safelistin toiminnan varmistaminen

Kun olette lisänneet luokat safelistiin, varmistakaa niiden generointi tarkastelemalla käännetyn CSS:n tulostetta. Suorittakaa npx tailwindcss -i input.css -o output.css ja etsikää tulostetiedostosta jokin safelistiin lisätyistä luokista.

Jos luokka puuttuu, tarkistakaa safelistin regex-kuvio uudelleen (regex-virheet ovat hiljaisia). Voitte myös lisätä luokan tilapäisesti safelistiin merkkijonona ja varmistaa, että konfiguraatio luetaan ylipäätään.

# Build and verify
npx tailwindcss -i input.css -o output.css

# Check if safelisted class is in output:
grep 'bg-red-500' output.css
# Should print: .bg-red-500 { background-color: #ef4444; }

# If missing, test with direct string:
# safelist: ['bg-red-500'] -- if this works, your regex is wrong

# Regex debugging:
const pattern = /bg-(red|green)-(100|500)/;
console.log(pattern.test('bg-red-500')); // true
console.log(pattern.test('bg-red-600')); // false -- 600 not in pattern

Blocklist luokkien poissulkemiseen

Safelistin vastakohta on blocklist – luokat, joiden luomisen haluatte estää, vaikka JIT tunnistaisi ne templaattilähteistänne. Tätä tarvitaan harvoin, mutta siitä on hyötyä, kun ylikirjoitatte Tailwind-luokkia mukautetulla CSS:llä ja haluatte välttää generoitujen utilityjen aiheuttamat spesifisyysristiriidat.

Lisätkää blocklist-taulukko tiedostoon tailwind.config.js ja määrittäkää siinä poissuljettavat luokkien nimet. JIT ohittaa nämä luokat, vaikka se löytäisi ne sisältötiedostoista.

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  blocklist: [
    // Prevent these classes from being generated
    // (e.g., you have custom .container styles that conflict)
    'container',
    // Prevent a whole pattern:
    // blocklist does NOT support regex -- individual names only
  ],
  theme: {
    extend: {},
  },
}

Safelist ulkoisista tietolähteistä tuleville luokille

Headless CMS -projekteissa, blogialustoilla tai käyttäjän teeman sallivissa sovelluksissa luokkien nimet voivat tulla tietokannasta tai CMS-sisältökentästä. Safelistin tulisi kattaa kaikkien mahdollisten arvojen joukko, jonka CMS sallii käyttäjien valita.

Dokumentoikaa sallitut luokat, rajoittakaa CMS-syötteet tähän joukkoon ja toistakaa sama rajoitus safelist-kuviossa. Näin varmistatte, ettei sisällössä käytetä luokkaa, jota ei ole luotu tyylitiedostoon – tämä on yleinen virhe CMS-pohjaisissa Tailwind-projekteissa.

// Allowed alert colors in your CMS:
// success, error, warning, info
// Tailwind classes for each stored in CMS: 'bg-green-100', 'bg-red-100', etc.

// tailwind.config.js safelist:
module.exports = {
  safelist: [
    // Exact list matching what CMS allows
    'bg-green-100', 'text-green-800', 'border-green-300',
    'bg-red-100', 'text-red-800', 'border-red-300',
    'bg-yellow-100', 'text-yellow-800', 'border-yellow-300',
    'bg-blue-100', 'text-blue-800', 'border-blue-300',
  ],
}

Pikatesti

Testatkaa, kuinka hyvin ymmärrätte tämän oppitunnin Tailwind CSS Mastery -aiheet.

Vastaa interaktiivisessa oppitunnissa

Oppitunnin yhteenveto

Tässä oppitunnissa opitte, että tailwind.config.js-tiedoston safelist pakottaa JIT:n luomaan luokat riippumatta siitä, esiintyvätkö ne tarkistetuissa sisältötiedostoissa; regex-arvoja sisältävät kuvio-objektit luovat tehokkaasti kokonaisia toisiinsa liittyvien luokkien joukkoja; ja parhaita vaihtoehtoja safelistille ovat dynaamisten arvojen yhdistäminen kokonaisiin luokkamerkkijonoihin JS-objekteissa, inline-tyylien käyttäminen todella mielivaltaisille ajonaikaisille arvoille tai CSS-muuttujien hyödyntäminen Tailwindin mielivaltaisen arvon syntaksilla. Seuraavaksi analysoimme ja pienennämme bundlen kokoa.

Aloita maksutta

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

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Dynaamisten luokkien sallittujen luokkien luettelo” ilmainen?

Kyllä – oppitunnin ”Dynaamisten luokkien sallittujen luokkien luettelo” 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 ”Dynaamisten luokkien sallittujen luokkien luettelo”?

Käyttäkää tailwind.config.js-tiedoston safelist-asetusta varmistaaksenne, että JIT:n staattisesti havaitsemattomat dynaamisesti muodostetut luokkien nimet sisällytetään aina. 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 ”Dynaamisten luokkien sallittujen luokkien luettelo”-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

JIT-moottorin toiminta
Dynaamisten luokkien sallittujen luokkien luettelo
Bundlen koon analysointi ja pienentäminen
Arvot ilman ennalta määritettyä asteikkoa ja niiden hinta

← Takaisin: Tailwind CSS Academy