Tailwind CSS Academy · Pelajaran

Menyenaraikan Kelas Dinamik dengan Selamat

Gunakan pilihan safelist dalam tailwind.config.js untuk memastikan nama kelas yang dibina secara dinamik, yang tidak dapat dikesan secara statik oleh JIT, sentiasa disertakan.

Pelajaran 2 daripada 413 langkah

Menyenaraikan Kelas Dinamik dengan Selamat ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.

Masalah Membenarkan Kelas

Imbasan statik JIT merupakan kelebihan dalam kebanyakan kes, tetapi ia menimbulkan cabaran apabila nama kelas ditentukan semasa masa jalan — daripada pangkalan data, respons API, atau pilihan warna pengguna. Nama kelas yang ditentukan secara dinamik ini tidak pernah muncul sebagai rentetan lengkap dalam fail sumber anda, jadi JIT tidak menjana kelas tersebut.

Senarai dibenarkan dalam tailwind.config.js ialah penyelesaian rasmi: anda menyenaraikan kelas (atau corak) yang mesti sentiasa dijana oleh JIT secara jelas, tanpa mengira sama ada kelas tersebut muncul dalam fail templat anda.

Konfigurasi Senarai Dibenarkan Asas

Tambahkan tatasusunan safelist pada tailwind.config.js anda. Senaraikan sebarang nama kelas lengkap yang tidak dapat dikesan oleh JIT secara statik. JIT akan sentiasa menjana CSS untuk setiap kelas dalam tatasusunan ini, walaupun kelas tersebut tidak ditemui dalam fail kandungan anda.

Ini ialah bentuk pembenaran kelas yang paling mudah — nama kelas individu. Kaedah ini berfungsi dengan baik untuk sebilangan kecil kelas dinamik yang diketahui.

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

Pembenaran Kelas Berasaskan Corak

Untuk nilai dinamik merentasi keseluruhan skala warna, menyenaraikan setiap kelas secara individu adalah membosankan. Sebaliknya, gunakan objek corak dalam senarai dibenarkan yang menentukan corak regex. JIT akan menjana semua kelas yang sepadan dengan corak tersebut.

Contohnya, untuk menjana semua warna latar belakang bagi tahap amaran (merah, hijau, kuning, biru) merentasi rona 100 dan 700, anda boleh menggunakan corak yang sepadan tepat dengan gabungan tersebut.

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

Menjana Variasi Dengan Corak

Pembenaran kelas berasaskan corak turut menyokong penjanaan variasi bersama kelas asas. Tambahkan tatasusunan variants pada objek corak untuk memasukkan variasi hover, focus, gelap dan responsif.

Ini penting apabila kelas yang ditentukan secara dinamik digunakan dalam elemen interaktif. Contohnya, lencana status yang berubah warna berdasarkan medan pangkalan data memerlukan keadaan hovernya turut dijana jika lencana tersebut ialah butang yang boleh diklik.

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

Bila Hendak Menggunakan Senarai Dibenarkan

Senarai dibenarkan sepatutnya menjadi pilihan terakhir, bukan pilihan pertama. Sebelum membenarkan kelas, pertimbangkan alternatif berikut:

Petakan nilai kepada rentetan kelas lengkap dalam objek JavaScript — penyelesaian yang paling kemas
Gaya sebaris untuk nilai masa jalan yang benar-benar sewenang-wenangnya seperti warna heks yang dipilih pengguna
Pemboleh ubah CSS dengan kelas Tailwind tetap yang merujuk pemboleh ubah tersebut

Penggunaan senarai dibenarkan secara berlebihan menafikan tujuan JIT dan boleh mengembalikan masalah fail CSS yang besar.

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

Gaya Sebaris untuk Nilai yang Benar-benar Dinamik

Apabila nilai benar-benar sewenang-wenangnya semasa masa jalan — seperti warna jenama tersuai pengguna yang disimpan dalam pangkalan data — gaya sebaris ialah alat yang sesuai. Utiliti Tailwind dipetakan kepada nilai tetap pada skala reka bentuk, manakala gaya sebaris boleh menerima sebarang nilai yang dikira.

Gabungkan Tailwind untuk susun atur dan struktur dengan gaya sebaris untuk satu nilai yang benar-benar dinamik. Dengan cara ini, 99% gaya anda kekal dalam Tailwind dan gaya sebaris dikhaskan untuk kes dinamik tertentu.

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

Pemboleh Ubah CSS sebagai Nilai Dinamik

Satu teknik yang berkesan ialah menetapkan pemboleh ubah CSS kepada nilai dinamik dan merujuknya dengan sintaks nilai sewenang-wenangnya Tailwind: bg-[var(--brand-color)]. Rentetan kelas bg-[var(--brand-color)] ialah rentetan statik lengkap yang boleh dikesan dan dijana oleh JIT.

Pemboleh ubah CSS itu sendiri kemudiannya dikemas kini secara dinamik melalui JavaScript atau gaya sebaris pada elemen induk, manakala kelas tersebut kekal tetap dalam templat anda.

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

Senarai Dibenarkan dalam Monorepo atau Pustaka Komponen

Apabila membina pustaka komponen yang akan digunakan oleh projek lain, kelas dalam komponen pustaka anda mesti disertakan dalam imbasan JIT projek pengguna. Sertakan sumber pustaka dalam tatasusunan kandungan konfigurasi pengguna, atau gunakan preset yang disertakan bersama senarai dibenarkan.

Jika pustaka mengedarkan JavaScript yang telah dikompil (bukan HTML sumber), tambahkan laluan pakej pada glob kandungan pengguna, dengan menunjuk kepada fail JS yang telah dikompil dan masih mengandungi rentetan kelas sebagai rentetan literal.

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

Mengesahkan Senarai Dibenarkan Berfungsi

Selepas menambahkan kelas pada senarai dibenarkan, sahkan bahawa kelas tersebut dijana dengan memeriksa output CSS yang dikompil. Jalankan npx tailwindcss -i input.css -o output.css dan cari salah satu kelas yang dibenarkan dalam fail output.

Jika kelas tersebut tiada, semak semula corak regex dalam senarai dibenarkan (ralat regex tidak dipaparkan). Anda juga boleh menambahkan kelas itu buat sementara waktu sebagai rentetan dalam senarai dibenarkan untuk mengesahkan bahawa konfigurasi sedang dibaca.

# 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

Senarai Disekat untuk Mengecualikan Kelas

Lawan kepada senarai dibenarkan ialah senarai disekat — kelas yang ingin anda halang daripada dijana walaupun JIT mengesannya dalam templat anda. Keperluan ini jarang berlaku tetapi berguna apabila anda menggantikan kelas Tailwind dengan CSS tersuai dan ingin mengelakkan konflik kekhususan daripada utiliti yang dijana.

Tambahkan tatasusunan blocklist pada tailwind.config.js bersama nama kelas yang hendak dikecualikan. JIT akan melangkau kelas ini walaupun kelas tersebut ditemui dalam fail kandungan.

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

Membenarkan Kelas daripada Sumber Data Luaran

Dalam projek CMS tanpa kepala, platform blog atau aplikasi yang membolehkan penyesuaian tema pengguna, nama kelas mungkin datang daripada pangkalan data atau medan kandungan CMS. Senarai dibenarkan hendaklah merangkumi set semua nilai yang mungkin yang dibenarkan oleh CMS untuk dipilih oleh pengguna.

Dokumentasikan set kelas yang dibenarkan, hadkan input CMS kepada set tersebut, dan cerminkan had itu dalam corak senarai dibenarkan. Ini memastikan tiada kelas digunakan dalam kandungan yang tidak dijana dalam helaian gaya — iaitu pepijat biasa dalam projek Tailwind dipacu CMS.

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

Semakan Pantas

Test pemahaman anda tentang konsep Tailwind CSS Mastery daripada pelajaran ini.

Jawab dalam pelajaran interaktif

Ulang Kaji Pelajaran

Dalam pelajaran ini, anda telah mempelajari bahawa: senarai dibenarkan dalam tailwind.config.js memaksa JIT menjana kelas tanpa mengira sama ada kelas tersebut muncul dalam fail kandungan yang diimbas; objek corak dengan nilai regex menjana keseluruhan set kelas berkaitan dengan cekap; dan alternatif terbaik kepada senarai dibenarkan ialah memetakan nilai dinamik kepada rentetan kelas lengkap dalam objek JS, menggunakan gaya sebaris untuk nilai masa jalan yang benar-benar sewenang-wenangnya, atau menggunakan pemboleh ubah CSS yang dirujuk dengan sintaks nilai sewenang-wenangnya Tailwind. Seterusnya, kita akan menganalisis dan mengurangkan saiz himpunan.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 30
Pelajaran: 120

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menyenaraikan Kelas Dinamik dengan Selamat” percuma?

Ya — teks penuh “Menyenaraikan Kelas Dinamik dengan Selamat” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menyenaraikan Kelas Dinamik dengan Selamat”?

Gunakan pilihan safelist dalam tailwind.config.js untuk memastikan nama kelas yang dibina secara dinamik, yang tidak dapat dikesan secara statik oleh JIT, sentiasa disertakan. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Menyenaraikan Kelas Dinamik dengan Selamat” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?

Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Cara Enjin JIT Berfungsi
Menyenaraikan Kelas Dinamik dengan Selamat
Menganalisis dan Mengurangkan Saiz Bundle
Nilai Arbitrari dan Kosnya

← Kembali ke Tailwind CSS Academy