Saya sedang membina perpustakaan komponen menggunakan TailwindCss untuk projek saya yang seterusnya, dan saya baru sahaja menghadapi masalah kecil dengan komponen Button.
Saya lulus prop seperti Nama kelas dipaparkan dengan baik dalam penyemak imbas, ia menunjukkan 'primary' atau 'secondary' yang berfungsi sama seperti yang saya lakukan dalam tailwind.config. js< ;/code> dan kemudian saya mahu menetapkannya kepada komponen butang menggunakan dalam DOM, tetapi tidak dalam tab Gaya Gunaan. Template Lites ;
Konfigurasi tema adalah seperti berikut:
tema: { lanjutkan: { warna: { utama: { 500: '#B76B3F', }, menengah: { 500: '#344055', }, }, }, }, Tetapi ia tidak menggunakan sebarang gaya. Jika saya hanya menambah bg-primary-500 ia berfungsi dengan baik.
Sejujurnya, saya hanya tertanya-tanya sama ada ini kerana pengkompil JIT tidak mengambil nama kelas dinamik atau jika saya melakukan sesuatu yang salah (atau jika ini bukan cara untuk menggunakan tailWind).
Sebarang bantuan dialu-alukan, terima kasih terlebih dahulu!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Tidak disyorkan untuk menulis kelas CSS Tailwind dengan cara ini. Walaupun modJIT tidak disokong, untuk memetik dokumentasi Tailwind CSS: "Tailwind tidak termasuk apa-apa jenis masa jalan klien, jadi nama kelas perlu diekstrak secara statik pada masa binaan dan tidak boleh dipercayai dalam klien "
Jadi selepas mengetahui bahawa cara kerja ini tidak digunakan dan JIT tidak menyokongnya (terima kasih kepada pengulas yang murah hati). Saya telah menukar pendekatan kepada pendekatan yang lebih berasaskan "konfigurasi".
Pada asasnya, saya mentakrifkan const dengan konfigurasi asas prop yang berbeza dan menerapkannya pada komponen. Ini memerlukan lebih banyak penyelenggaraan, tetapi ia menyelesaikan kerja.
Ini ialah contoh konfigurasi. (tiada menaip diperlukan buat masa ini) dan beberapa pemfaktoran semula yang lebih baik, tetapi anda akan mendapat idea itu.
const buttonConfig = { // Colors primary: { bgColor: 'bg-primary-500', color: 'text-white', outline: 'border-primary-500 text-primary-500 bg-opacity-0 hover:bg-opacity-10', }, secondary: { bgColor: 'bg-secondary-500', color: 'text-white', outline: 'border-secondary-500 text-secondary-500 bg-opacity-0 hover:bg-opacity-10', }, // Sizes small: 'px-3 py-2', medium: 'px-4 py-2', large: 'px-5 py-2', };Kemudian saya menerapkan gaya seperti ini: