Rumah > Soal Jawab > teks badan
P粉0345716232023-08-25 09:28:28
Tidak disyorkan untuk menulis kelas CSS Tailwind dengan cara ini. Walaupun mod JIT 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 "
P粉5305192342023-08-25 00:45:37
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:
<motion.button whileTap={{ scale: 0.98 }} className={` rounded-lg font-bold transition-all duration-100 border-2 focus:outline-none ${buttonConfig[size]} ${outlined && buttonConfig[color].outline} ${buttonConfig[color].bgColor} ${buttonConfig[color].color}`} onClick={onClick} type="button" tabIndex={0} > {children} </motion.button>