Bina nama kelas secara dinamik dalam TailwindCss

Question

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 'primary' atau 'secondary' yang berfungsi sama seperti yang saya lakukan dalam tailwind.config. js< ;/code> dan kemudian saya mahu menetapkannya kepada komponen butang menggunakan Template Lites ;

<butang
    Nama kelas={`
    w-40 bulat-lg p-3 m-2 fon-peralihan tebal-semua tempoh-100 jidar-2 aktif:skala-[0.98]
    bg-${color}-500 `}
    onClick={onClick}
    type="butang"
    tabIndex={0}
  >
    {anak-anak}
</button>

Nama kelas dipaparkan dengan baik dalam penyemak imbas, ia menunjukkan bg-primary-500 dalam DOM, tetapi tidak dalam tab Gaya Gunaan.

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!

Answer 1

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 "

Answer 2

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>