Vue Tailwind dan Kelas Dinamik

Projek yang saya usahakan baru-baru ini menggunakan Vite, Vue dan Tailwind.

Selepas beberapa lama bekerja dengan warna tersuai, saya menghadapi sedikit kekeliruan.

Menambah dan menggunakan warna tersuai dalam templat, bukanlah isu - proses dibuat dengan sangat jelas menggunakan Dokumentasi Tailwind

// tailwind.config.js
module.exports = {
    theme: {
        colors: {
          'custom-green': {
              50: '#9bd1b2',
              ...
              700: '#284735'
          },
        }
    }
}

Isu saya ialah apabila menggunakan warna tersuai dengan kelas css dinamik dan statik dalam templat Vue.

Apabila menjalankan projek dengan npm run dev atau vite, bg-custom-green-50 atau text-custom-green-50 tidak berfungsi dan tidak pernah muncul dalam fail css.

Pemahaman saya ialah jika nama kelas css penuh anda tidak wujud dalam templat maka tailwind tidak akan menambah atau menjananya dalam fail css.

Dengan mengandaikan kelas css: text-custom-green-50 atau bg-custom-green-50 tidak digunakan di tempat lain dalam projek

Contoh di bawah tidak akan berfungsi

<template>
    <h3 :class="['font-bold', colorClass]">{{ heading }}</h3>
</template>
<script type="text/javascript">
    const colorClass = ref('')

    // color being set somewhere else in the component logic
    colorClass.value = 'text-custom-green-50'
</script>

Contoh di bawah akan berfungsi

<template>
    <h3 :class="['font-bold', colorClass]">{{ heading }}</h3>
    <p class="text-custom-green">Green text</p>
</template>
<script type="text/javascript">
    const colorClass = ref('')

    // color being set somewhere else in the component logic
    colorClass.value = 'text-custom-green-50'
</script>

Perbezaan antara kedua-dua contoh ialah kelas css teks-tersuai-hijau ditambah pada templat jadi tailwind akan menambahkannya pada fail css yang dijana.

Untuk mengatasinya, anda boleh menambah sebarang warna tersuai atau kelas tailwind ke senarai selamat dalam fail tailwind.config.js anda.

// tailwind.config.js
module.exports = {
    safelist: [
        'text-custom-green-50',
        'bg-custom-green-50'
    ]
}

Warna ini akan tersedia walaupun ia tidak digunakan secara langsung dalam templat, tetapi ditambah secara dinamik pada titik lain

Semoga orang lain mendapati ini membantu.

Atas ialah kandungan terperinci Vue Tailwind dan Kelas Dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!