Mengapa nama kelas rentetan bercantum tidak berfungsi dalam Tailwind?

Question

Setiap kali saya akhirnya menggunakan atribut gaya di luar className kerana tiada satu pun daripada contoh di bawah menggunakan gaya pada elemen React saya. Bolehkah anda menerangkan mengapa ini berlaku dan bagaimana saya boleh membetulkannya?

Saya telah membaca dokumentasi (https://tailwindcss.com/docs/content-configuration#dynamic-class-names) tetapi kes penggunaan saya ialah: pengguna memilih warna daripada pemilih warna dan kemudian saya memilih berdasarkan warna pada latar belakang Perubahan warna yang dipilih. Saya tidak boleh menghantar nilai "bg-[colorValue]" kepada setiap warna individu, jadi saya perlu menggabungkan nilai dengan "bg-[" selepas itu. Kerana saya tidak boleh memetakan semua warna ke dalam nama kelas yang lengkap.

const red500 = "red-500";
const red600Hex = "#dc2626";
const bgColor = "bg-[" + red600Hex + "]";
const bgColor2 = "bg-[" + "#dc2626" + "]";

function App() {
    return (
        <>
            <h1 className={` bg-${red500} `}>Hello</h1>
            <h1 className={` bg-[${red600Hex}] `}>Hello</h1>
            <h1 className={` bg-${`[${red600Hex}]`} `}>Hello</h1>
            <h1 className={` ${bgColor} `}>Hello</h1>
            <h1 className={` ${bgColor2} `}>Hello</h1>
        </>
    );
}

Answer 1

Apabila rentetan literal templat berfungsi dengan betul, anda tidak perlu risau tentang penggabungan rentetan.

const red500 = 'red-500';
const red600Hex = '#dc2626';
const bgColor = `bg-[${red600Hex}]`;
const bgColor2 = `bg-[${'#dc2626'}]`;

export function App() {
  return (
    <>
      <h1 className={` bg-${red500} `}>Hello</h1>
      <h1 className={` bg-[${red600Hex}] `}>Hello</h1>
      <h1 className={` bg-${`[${red600Hex}]`} `}>Hello</h1>
      <h1 className={` ${bgColor} `}>Hello</h1>
      <h1 className={` ${bgColor2} `}>Hello</h1>
    </>
  );
}

Taman Permainan Tailwind

Pautan di atas juga memberi saya amaran tentang penggabungan: "Bug Finder: Unexpected string concatenation of literals.eslint"

Saya malah menambah pilihan untuk mengawal warna h1 terakhir secara dinamik melalui keadaan:

const colors = [
  {value: "#dc2626"},
  {value: "#dc06e6"},
  {value: "#dce606"},
]


export function App() {
  const [color, setColor] = React.useState(colors[0].value)
  return (
    <>
      <h1 className={`text-green-500 bg-${red500} `}>Hello</h1>
      <h1 className={`bg-[${red600Hex}] `}>Hello</h1>
      <h1 className={`text-green-200 bg-${`[${red600Hex}]`} `}>Hello</h1>
      <h1 className={`${bgColor} `}>Hello</h1>
      <h1 className={`bg-[${color}]`}>Hello</h1>
      <select onChange={(e) => setColor(e.currentTarget.value)}>
        {colors.map(c => <option className={`bg-[${c.value}]`} value={c.value}>{c.value}</option>)}
      </select>
    </>
  );
}