我有一個網站，我希望用戶能夠使用TailwindCSS動態更新一個div的顏色。但是，當我添加一個類時，似乎Tailwind并沒有反映出變化。
請注意，所提供的示例雖然在這里有效，但并沒有反映正確安裝的順風依賴項的真實行為。這是因為Tailwind的(按照指令安裝的)類是在編譯時定義的，而cdn是在運行時構建的?；旧?，CDN會隨著DOM的每次變化而更新，而Tailwinds & quotprod & quot是基于對html/js/css文件的簡單分析創建的。
我選擇了包括CDN版本。這里包含了它，因為它包含了我的應用程序所需的行為，并且是我可以包含的唯一版本。如果您想重現問題行為，只需將代碼復制到一個普通的Tailwinds安裝項目中，并編輯掉& lt腳本src = & quothttps://cdn . tailwindcss . com & quot；& gt& lt/script & gt；線。
document.querySelector("button").addEventListener("click", function() {
const colorValue = document.querySelector("input").value;
const div = document.querySelector("div");
div.classList.remove("bg-[#864b4b]");
div.classList.add(`bg-[${colorValue}]`);
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example issue</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="ml-4 h-96">
<label for="color-pick" class="block font-extrabold text-slate-800">Pick a color</label
>
<input type="color" class="mb-4" name="color-pick" id="color-pick" />
<button
type="button"
class="block text-slate-100 font-bold bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 rounded-lg text-sm px-5 py-2.5 mr-2 mb-2"
>
Change div to chosen color
</button>
<div class="w-20 h-20 bg-[#864b4b]"></div>
</body>
</html>考慮使用樣式屬性:
document.querySelector("button").addEventListener("click", function() {
const colorValue = document.querySelector("input").value;
const div = document.querySelector("div");
div.classList.remove("bg-[#864b4b]");
div.style.backgroundColor = colorValue;
});