Mengapa Saya Tidak Boleh Menggunakan Nama Kelas Dinamik dalam CSS Tailwind?

Mengapa Nama Kelas Dinamik Tidak Boleh Digunakan dalam CSS Tailwind

Dalam CSS Tailwind, nama kelas diekstrak sebagai rentetan lengkap yang tidak terputus daripada kod sumber anda. Ini bermakna jika anda cuba membina nama kelas secara dinamik menggunakan interpolasi atau penggabungan rentetan, Tailwind tidak akan mengenalinya dan tidak akan menjana CSS yang sepadan.

Contoh

Sebagai contoh, pertimbangkan perkara berikut coretan kod:

<p className={`bg-[${colors.secondary}] text-text-white`}></p>

Dalam contoh ini, sifat className ditetapkan kepada literal templat yang menggabungkan pembolehubah color.secondary dengan rentetan teks-teks-putih. Tailwind tidak akan mengenali nama kelas bg-[${colors.secondary}] dan tidak akan menghasilkan CSS yang sepadan.

Penyelesaian

Terdapat dua cara untuk menyelesaikan isu ini:

1. Gunakan nama kelas penuh dalam takrifan anda, seperti:

const colors = {
    secondary: darkTheme ? "bg-[#FFFFFF]" : "bg-[#FFFFFF]",
};

2. Gunakan atribut gaya untuk menetapkan warna latar belakang secara dinamik, seperti:

<p className="text-text-white">

Dengan mengikuti garis panduan ini, anda boleh memastikan bahawa nama kelas CSS Tailwind anda dijana dengan betul dan gaya anda digunakan seperti yang diharapkan.

Atas ialah kandungan terperinci Mengapa Saya Tidak Boleh Menggunakan Nama Kelas Dinamik dalam CSS Tailwind?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!