Bagaimana Menggunakan Huruf Templat dengan Betul untuk Manipulasi Kelas Dinamik dalam CSS Tailwind?

Bagaimanakah Menggunakan Manipulasi Kelas Dinamik dalam CSS Tailwind dengan Huruf Templat?

Dalam CSS Tailwind, penetapan kelas bersyarat membenarkan pembangun mengemas kini nama kelas secara dinamik berdasarkan syarat tertentu. Walau bagaimanapun, menghadapi isu semasa cuba menggunakan ciri ini adalah perkara biasa.

Dalam satu keadaan sedemikian, pengguna cuba menukar kelas menggunakan kod berikut:

<div
  className=" absolute inset-0 ${click ? translate-x-0 : -translate-x-full }
        transform  z-400 h-screen w-1/4 bg-blue-300"
>
</div>

Walau bagaimanapun, coretan kod ini gagal berfungsi seperti yang diharapkan. Pendekatan yang betul untuk senario ini adalah seperti berikut:

<div className={`absolute inset-0 ${click ? 'translate-x-0' : '-translate-x-full'} transform z-400 h-screen w-1/4 bg-blue-300`}></div>

Sebagai alternatif, anda juga boleh menggunakan sintaks berikut:

<div className={'absolute inset-0 ' + (click ? 'translate-x-0' : '-translate-x-full') + ' transform z-400 h-screen w-1/4 bg-blue-300'}></div>

Adalah penting untuk mengelak daripada menggunakan penggabungan rentetan untuk penciptaan kelas, sebagai ditunjukkan di bawah:

<div className={`text-${error ? 'red' : 'green'}-600`}></div>

Sebaliknya, pilih kelas lengkap names:

<div className={`${error ? 'text-red-600' : 'text-green-600'}`}></div>

Tailwind akan mengekalkan kelas yang muncul secara keseluruhan dalam templat anda semasa binaan pengeluaran.

Selain itu, terdapat pilihan lanjut yang boleh anda gunakan, seperti:

• Menggunakan perpustakaan seperti nama kelas atau clsx
• Menggunakan Penyelesaian khusus tailwind seperti twin.macro, twind atau xwind

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