Bagaimana untuk Menggunakan Nama Kelas Dinamik dengan CSS Tailwind?

Nama Kelas Dinamik dan CSS Tailwind

Membina nama kelas secara dinamik dalam JavaScript ialah amalan biasa, tetapi apabila ia berkaitan dengan CSS Tailwind, ia menimbulkan cabaran. CSS Tailwind bergantung pada mengekstrak nama kelas yang tidak terputus lengkap daripada fail sumber anda.

Seperti dokumentasi Tailwind, membina nama kelas secara dinamik menggunakan interpolasi atau penggabungan rentetan akan menyebabkan Tailwind tidak menemui kelas dan oleh itu tidak menjana CSS yang sepadan. Contohnya:

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

Dalam contoh ini, rentetan text-red-600 dan text-green-600 tidak wujud sebagai nama kelas yang lengkap, jadi Tailwind mengabaikannya.

Penyelesaian:

Untuk menangani isu ini, terdapat beberapa penyelesaian:

• Gunakan Nama Kelas Lengkap:
  Pastikan mana-mana nama kelas yang anda gunakan wujud dalam bentuk lengkapnya.

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

• Tentukan Nama Kelas dalam Pembolehubah:
  Tentukan nama kelas dalam pembolehubah yang boleh dirujuk terus.

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

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

• Gunakan Atribut gaya:

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

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