動態類別名稱和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><p className="text-text-white">
以上是如何在 Tailwind CSS 中使用動態類別名稱？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
