在 TailwindCss 中動態建構類別名

Question

我目前正在使用 TailwindCss 為我的下一個專案建立一個元件庫，我剛剛在處理 Button 元件時遇到了一個小問題。

我傳遞了像'primary' 或'secondary' 這樣的道具，它與我在tailwind.config.js< ;/code> 中指定的顏色相匹配，然後我想將其分配給按鈕使用Template Lites 的組件如下所示： bg-${color}-500

<button
    className={`
    w-40 rounded-lg p-3 m-2 font-bold transition-all duration-100 border-2 active:scale-[0.98]
    bg-${color}-500 `}
    onClick={onClick}
    type="button"
    tabIndex={0}
  >
    {孩子}
</button>

類別名稱在瀏覽器中顯示得很好，它在 DOM 中顯示 bg-primary-500，但不在「套用的樣式」標籤中顯示。

主題配置如下：

theme: {
    extend: {
      colors: {
        primary: {
          500: '#B76B3F',
        },
        secondary: {
          500: '#344055',
        },
      },
    },
  },

但它不套用任何樣式。如果我只是手動添加 bg-primary-500 ，它就可以正常工作。

老實說，我只是想知道這是否是因為 JIT 編譯器沒有選擇動態類別名，或者我做錯了什麼（或者這不是使用 tailWind 的方式）。

歡迎任何幫助，提前致謝！

Answer 1

不建議用這種方式來寫 Tailwind CSS 類別 。甚至JIT 模式也不支援，引用一下Tailwind CSS 文件：「Tailwind 不包含任何類型的客戶端運行時，因此類別名稱需要在建置時靜態提取，並且不能依賴在客戶 ”

Answer 2

所以在發現這種工作方式不被推薦並且JIT不支持它之後（感謝慷慨的評論者）。我已將方法更改為更基於“配置”的方法。

基本上，我使用不同 props 的基本配置定義一個 const 並將它們應用於元件。這需要更多的維護工作，但它可以完成工作。

這是一個設定範例。 （目前無需打字）並進行一些更好的重構，但您會明白的。

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',
};

然後我就這樣套用樣式：

<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>