Bagaimana untuk Menggunakan Literal Templat dengan Betul untuk Pengubahsuaian Kelas Dinamik dalam CSS Tailwind?

Menggunakan Literal Templat untuk Pengubahsuaian Kelas Dinamik dalam TailwindCSS

Apabila cuba menukar kelas secara dinamik menggunakan kod berikut:

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

anda mungkin menghadapi sesuatu isu. Cara yang betul untuk mencapai ini menggunakan literal templat ialah:

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

Sebagai alternatif, anda boleh menggunakan penggabungan rentetan untuk menentukanNama kelas anda:

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

Adalah penting untuk mengelakkan penggabungan rentetan untuk kelas individu nama, cth.:

className={`text-${error ? 'red' : 'green'}-600`}

Sebaliknya, pilih nama kelas lengkap sebagai berikut:

className={`${error ? 'text-red-600' : 'text-green-600'}`}

className={error ? 'text-red-600' : 'text-green-600'}

Tailwind akan mengekalkan nama kelas lengkap dalam binaan pengeluaran.

Pertimbangkan untuk menggunakan perpustakaan seperti nama kelas, clsx atau penyelesaian khusus Tailwind seperti twin.macro, twind, atau xwind untuk selanjutnya fleksibiliti.

Sumber Tambahan:

• [React.js Menggunakan Nama Kelas Secara Bersyarat](https://reactjs.org/docs/dom-elements. html#nama-kelas-bersyarat-dan-gaya)
• [Cara Menambah Kelas secara Dinamik pada Nama Kelas Manual?](https://stackoverflow.com/questions/24217807/how-to-dynamically-add-a-class-to-manual-class-names)
• [Cara Betul untuk Mengendalikan Bersyarat Menggayakan dalam React](https://stackoverflow.com/questions/40787489/correct-way-to-handle-conditional-styling-in-react)
• [Membenamkan Ungkapan dalam JSX](https://reactjs.org/docs/jsx-in-depth.html#embedding-expressions-in-jsx)
• [Template Literals - MDN](https://developer.mozilla. org/en-US/docs/Web/JavaScript/Reference/Template_literals)
• [Mengoptimumkan untuk Pengeluaran - Menulis HTML Boleh Dimurnikan - Tailwind CSS](https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html)

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