如何使用TailwindCSS动态更新元素的颜色值？

问题核心 #

你想让用户通过颜色选择器动态修改div背景色，但在正式安装的Tailwind项目中，动态添加bg-[${colorValue}]这类自定义颜色类时完全没效果——这是因为正式版Tailwind是编译时生成样式，只有编译阶段能扫描到的类才会被打包进CSS；而CDN版本是运行时解析类，所以你的示例代码在CDN环境能正常工作，但正式版不行。

可行解决方案 #

1. 直接修改内联样式（最适配动态场景）

这是官方推荐的动态颜色处理方式，不需要依赖Tailwind的类，不管是CDN还是正式版都能稳定运行：

document.querySelector("button").addEventListener("click", function() {
  const colorValue = document.querySelector("input").value;
  const div = document.querySelector("div");
  div.style.backgroundColor = colorValue;
});

2. 预定义可选颜色（仅适用于颜色范围固定的场景）

如果用户只能从固定的颜色列表中选择，可以提前在Tailwind配置里定义这些颜色，然后动态添加预定义类：
在tailwind.config.js中扩展颜色：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-brown': '#864b4b',
        'custom-red': '#ff0000',
        // 按需添加更多固定颜色
      },
    },
  },
};

之后JS里就可以动态添加bg-custom-brown这类预定义类，编译时这些类会被正常生成。

3. 结合CSS变量与Tailwind @apply（兼顾类写法与动态性）

这种方式既保留Tailwind的类语法，又支持动态修改颜色：

• 第一步，在项目的CSS文件中定义绑定变量的类：

.custom-bg {
  @apply bg-[var(--custom-bg-color)];
}

• 第二步，给目标div加上这个类，并初始化变量：

<div class="w-20 h-20 custom-bg" style="--custom-bg-color: #864b4b"></div>

• 第三步，JS中修改CSS变量的值：

document.querySelector("button").addEventListener("click", function() {
  const colorValue = document.querySelector("input").value;
  const div = document.querySelector("div");
  div.style.setProperty('--custom-bg-color', colorValue);
});

为什么动态拼接的类不生效？ #

正式版Tailwind通过静态扫描项目中的HTML、JS、CSS文件来收集所有用到的类，只生成这些类对应的CSS规则。动态拼接的类（比如bg-[${colorValue}]）在编译阶段不存在，所以不会被纳入样式生成范围，自然无法生效。

内容的提问来源于stack exchange，提问作者Mr. Magic