class="w-[${width}px]"不生效，因Tailwind的方括号任意值语法仅在构建时静态解析，无法处理运行时JS变量插值；应改用内联style或预定义/注册尺寸。
为什么 class="w-[${width}px]" 在 Vue/React 中不生效
因为 Tailwind 的方括号任意值语法（如 w-[200px]）是在构建时（build time）静态解析的，不是运行时（runtime）拼接字符串。你写 w-[${width}px]，浏览器看到的是字面量 w-[${width}px]，不是合法的类名，也不会被 JIT 引擎识别为任意值 —— 它压根没进入编译流程。
常见错误现象：
- 控制台无报错，但样式完全不应用
- DevTools 中 class 属性显示为
w-[${width}px]，未被 Tailwind 生成对应 CSS 规则 - 即使
width是响应式 ref 或 state，也毫无影响
根本原因：JIT 模式只扫描源码中**明确写出的、符合语法的任意值类**，比如 w-[200px]、top-[-12px]、bg-[#1e3a8a]。它不会执行 JS 模板字符串或变量插值。
style + calc() 是更直接的替代方案
当宽度需由 JS 动态计算（比如基于窗口尺寸、滚动位置、数据长度），用内联 style 更可靠，且能无缝结合 CSS 函数：
立即学习“前端免费学习笔记（深入）”；
-
<div :style="{ width: `${computedWidth}px` }">—— 简单数值 -
<div :style="{ width: `calc(100% - ${gap}px)` }">—— 支持 calc 表达式 -
<div :style="{ width: `clamp(200px, ${responsiveRatio}vw, 800px)` }">—— 响应式约束
注意：style 不受 Tailwind 特异性问题干扰，也不依赖构建时扫描，所有计算都在运行时完成。只要确保单位明确（如 px、rem、%），浏览器原生支持。
想保留 Tailwind 类名？必须提前“穷举”或注册
如果你坚持用 class 而非 style，就得让这些动态值在构建前就“存在”于代码中。可行路径只有两条：
- 在组件中显式列出所有可能值：
w-[200px] w-[250px] w-[300px] w-[350px]，再用条件 class 切换（适合离散、有限的选项） - 在
tailwind.config.js中通过theme.extend.spacing注册命名化尺寸：200: '200px', wide: 'min(80vw, 1200px)'，然后用w-[200]或w-wide
不要试图用 useEffect / onMounted 生成类名字符串再赋给 class 属性 —— 这样生成的类名不在 JIT 扫描范围内，CSS 规则根本不会生成。
特异性冲突会让任意值“看起来失效”
即使你写了合法的任意值类如 w-[200px]，它也可能被同级工具类（如 w-full）覆盖，因为两者都是单类选择器，特异性相同。实际生效取决于它们在最终 CSS 文件中的定义顺序，而这个顺序不可控。
- 典型表现：元素渲染后宽度是
100%而非200px，即使w-[200px]写在 HTML class 列表右侧 - 安全写法：
[&]:w-[200px]—— 利用任意变体提升特异性，强制生效（Tailwind ≥ 3.2） - 更推荐：
class="w-full [&]:w-[200px]"，语义清晰，且避免依赖加载顺序
任意值不是万能补丁，它解决的是“值未预设”的问题，不是“覆盖优先级”的问题。真要动态又保特异性，style 仍是更少意外的选择。
