/

在 Tailwind 中無法動態生成類別

在 Tailwind 中無法動態生成類別

我想在 Tailwind 中使用動態顏色，使用 JSX 中的這種語法：

1
bg-${color}-500

但它並未應用於頁面，因為 Tailwind 在程式碼中找不到類似 bg-red-500 的文字，所以該程式碼未加入最終的 CSS 中。

因此，我改成在 switch 中列舉所有可能的顏色選項，然後生成類別：

1
2
3
4
5
6
7
8
const getColorClass = (color) => {
  switch (color) {
    case 'green': return 'text-green-500'
    case 'blue': return 'text-blue-500'
    case 'red': return 'text-red-500'
    default: return ''
  }
}

並在類別中使用此函數：

1
2
<h1 className={`mt-10 ${getColorClass(color)}`}>
...

一個「快速」的方法是將可能需要的類別寫在註解中，像這樣：

1
2
/* possible Grid values are grid-cols-1 grid-cols-2 grid-cols-3 */
<div className={`grid grid-cols-${data[0].length}`}>

tags: [“dynamic classes”, “Tailwind”, “JSX”, “switch statement”, “color options”]