Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Menggunakan Literal Templat dengan Betul untuk Pengubahsuaian Kelas Dinamik dalam CSS Tailwind?

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

Barbara Streisand
Lepaskan: 2024-12-05 20:07:11
asal
961 orang telah melayarinya

How to Correctly Use Template Literals for Dynamic Class Modification in Tailwind CSS?

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 "
Salin selepas log masuk

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`}
Salin selepas log masuk

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'}
Salin selepas log masuk

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

className={`text-${error ? 'red' : 'green'}-600`}
Salin selepas log masuk

Sebaliknya, pilih nama kelas lengkap sebagai berikut:

className={`${error ? 'text-red-600' : 'text-green-600'}`}
Salin selepas log masuk
className={error ? 'text-red-600' : 'text-green-600'}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan