Vue+TypeScript中Tailwind CSS动态类名赋值失效问题排查

核心原因：Tailwind的静态编译机制 #

Tailwind CSS（尤其是JIT模式）的工作逻辑是静态扫描项目代码里所有明确写出的类名，仅将这些类对应的样式编译到最终CSS文件中。如果类名是通过字符串拼接动态生成的（比如你代码里的rounded-${props.round}、bg-${color}-${depth}），Tailwind在编译阶段无法识别这类动态生成的类名，也就不会生成对应的CSS规则。

你的代码具体问题 #

在Button组件的setTheme计算属性中，你通过拼接props值生成了完整类名（如rounded-lg、bg-yellow-500）。虽然这些类名最终会显示在DOM元素上，但由于编译时Tailwind未扫描到这些明确写出的类名，CSS文件中没有对应的样式规则，浏览器自然无法渲染出预期效果。

额外代码问题（非样式失效核心原因） #

你在data里给theme赋值this.setTheme的写法有误——setup函数内定义的setTheme无法在data中通过this访问，不过这只会导致theme值异常，并非样式不生效的关键。

内容的提问来源于stack exchange，提问作者Mohamad Abyannaufal