Bagaimana Menggunakan Pembolehubah Konteks dengan Nama Kelas CSS Tailwind?

Nama Kelas Dinamik dengan CSS Tailwind

Apabila menggunakan pembolehubah konteks dalam React, adalah perkara biasa untuk menghantar nilai ini sebagai nama kelas kepada Tailwind CSS. Walau bagaimanapun, pendekatan ini mungkin menghadapi pengehadan.

Konvensyen Penamaan CSS Tailwind

Menurut dokumentasi CSS Tailwind, ia hanya mentafsir rentetan tidak terputus lengkap sebagai nama kelas yang sah. Nama kelas dinamik yang dibina melalui interpolasi atau gabungan tidak akan dikenali.

Penyelesaian:

• Gunakan Nama Kelas Lengkap: Tentukan kelas penuh nama dalam Konteks Tema anda, memastikan ia wujud sebagai rentetan tunggal.

• Contoh:

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

• Gunakan Sebaris Atribut Gaya:

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

  Dengan mematuhi penyelesaian ini, anda boleh menggabungkan pembolehubah konteks dengan berkesan ke dalam nama kelas CSS Tailwind anda.

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