在 TailwindCss 中動態建構類別名
P粉147747637
2023-08-24 10:11:17
<p>我目前正在使用 TailwindCss 為我的下一個專案建立一個元件庫，我剛剛在處理 Button 元件時遇到了一個小問題。 </p>
<p>我傳遞了像<code>'primary'</code> 或<code>'secondary'</code> 這樣的道具，它與我在<code>tailwind.config.js< ;/code> 中指定的顏色相匹配，然後我想將其分配給按鈕使用<code>Template Lites</code> 的組件如下所示： <code>bg-${color}-500</ code></p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>類別名稱在瀏覽器中顯示得很好，它在 DOM 中顯示 <code>bg-primary-500</code>，但不在「套用的樣式」標籤中顯示。 </p>
<p>主題配置如下：</p>
<pre class="brush:php;toolbar:false;">theme: {
extend: {
colors: {
primary: {
500: '#B76B3F',
},
secondary: {
500: '#344055',
},
},
},
},</pre>
<p>但它不套用任何樣式。如果我只是手動添加 <code>bg-primary-500</code> ，它就可以正常工作。 </p>
<p>老實說，我只是想知道這是否是因為 JIT 編譯器沒有選擇動態類別名，或者我做錯了什麼（或者這不是使用 tailWind 的方式）。 </p>
<p>歡迎任何幫助，提前致謝！ </p>
不建議用這種方式來寫 Tailwind CSS 類別 。甚至JIT 模式也不支援，引用一下Tailwind CSS 文件：「Tailwind 不包含任何類型的客戶端運行時，因此類別名稱需要在建置時靜態提取，並且不能依賴在客戶 ”
所以在發現這種工作方式不被推薦並且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>