如何在 Tailwind CSS 中使用動態類別名稱？

動態類別名稱和Tailwind CSS

在JavaScript 中動態建構類別名稱是一種常見的做法，但是當涉及到Tailwind CSS 時，它提出了挑戰。 Tailwind CSS 依賴從原始檔案中提取完整完整的類別名稱。

根據 Tailwind 的文檔，使用字串插值或串聯動態建構類名將導致 Tailwind 找不到類，因此無法產生相應的 CSS。例如：

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

在此範例中，text-red-600 和 text-green-600 字串不作為完整的類別名稱存在，因此 Tailwind 會忽略它們。

解：

要解決這個問題，有幾個解：

• 使用完整的類別名稱：
  確保您使用的任何類別名稱都以其完整形式存在。

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

• 在變數中定義類別名稱：
  定義類別名稱在可以直接引用的變數中。

const colors = {
  // ...
  secondary: darkTheme ? "bg-[#FFFFFF]" : "bg-[#FFFFFF]",
  // ...
};

<p className={`${colors.secondary} text-text-white`}></p>

• 利用 style 特性：

<p className="text-text-white">

以上是如何在 Tailwind CSS 中使用動態類別名稱？的詳細內容。更多資訊請關注PHP中文網其他相關文章！