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

Memahami Had Nama Kelas Dinamik dalam Tailwind CSS

Isu:

Apabila cuba menghantar pembolehubah konteks sebagai nilai kepada nama kelas CSS Tailwind, operasi gagal. Isu ini timbul disebabkan oleh ketidakupayaan Tailwind untuk mengekstrak nama kelas dinamik.

Penjelasan:

Tailwind CSS beroperasi berdasarkan prinsip mengenal pasti nama kelas sebagai rentetan yang lengkap dan tidak terputus dalam pangkalan kod. Jika nama kelas dibina secara dinamik atau digabungkan, Tailwind tidak dapat mengenalinya dan akibatnya gagal menjana CSS yang sepadan. Tingkah laku ini digariskan secara eksplisit dalam dokumentasi rasmi, yang tidak menggalakkan pembinaan nama kelas secara dinamik.

Penyelesaian:

Untuk menangani cabaran ini, pastikan nama kelas digunakan adalah lengkap dan tidak terdiri daripada bahagian dinamik. Pertimbangkan untuk mentakrifkan nama kelas lengkap dalam konteks anda, seperti contoh berikut:

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

Sebagai alternatif, anda boleh mempertimbangkan untuk menggunakan atribut gaya untuk menetapkan nilai dinamik:

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

Dengan mematuhi garis panduan ini, Tailwind CSS akan mengenal pasti dan menjana peraturan CSS yang dikehendaki dengan tepat.

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