prefix 对 CSS 变量无效，因其仅作用于生成的工具类选择器（如 .p-4 → .tw-p-4），而 --tw-bg-opacity 等变量名由 Tailwind 源码硬编码，不被 prefix 重写或隔离，全局同名变量仍会覆盖导致渲染异常。
prefix 配置不能解决 CSS 变量冲突，它只作用于类名字符串——变量名（如 --tw-bg-opacity、--color-primary）完全不受影响。
为什么 prefix 对 CSS 变量无效
prefix 是 Tailwind 构建时对「生成的工具类选择器」做的字符串前缀处理，比如把 .p-4 编译成 .tw-p-4。但所有 Tailwind 内部使用的 CSS 自定义属性（即 CSS 变量），例如：
--tw-bg-opacity--tw-text-opacity--tw-border-opacity
这些变量名由 Tailwind 源码硬编码决定，prefix 配置项不会重写它们，也不会生成带前缀的变量（如 --tw-tw-bg-opacity）。
原生 CSS 变量冲突的真实场景
当你在项目中手动定义了同名变量，比如：
:root {
--tw-bg-opacity: 0.8;
}
就会覆盖 Tailwind 的默认值（通常是 1），导致 bg-black/50 渲染异常——这不是类名重复，而是变量被意外劫持。
立即学习“前端免费学习笔记（深入）”；
- 冲突不发生在 HTML class 属性上，而发生在 CSSOM 的变量作用域里
- 哪怕你开了
prefix: 'tw-'，--tw-bg-opacity还是那个名，照样被你的:root覆盖 - 第三方 UI 库（如 Naive UI）若也用
--tw-开头的变量，就可能互相干扰
怎么避免 CSS 变量名撞车
没有一键开关，只能靠命名隔离和加载顺序控制：
- 不要在
:root或全局作用域里定义以--tw-开头的变量；Tailwind 官方明确将其视为内部保留前缀 - 改用项目专属前缀，比如
--acme-bg-opacity、--myapp-spacing-xs - 如果必须复用 Tailwind 的变量逻辑，用
@layer+@apply封装，避开直接操作--tw-变量 - 检查第三方库文档，确认其是否注入同名变量；如有，优先通过 CSS scope（如
:where(.my-app) { ... }）限制作用域
容易忽略的关键点
很多人以为加了 prefix 就“全隔离”了，结果发现 bg-red-500/30 半透明失效、border-t 颜色变浅——问题往往出在变量层，而不是类名层。Tailwind 的变量系统是隐式依赖，不报错、不警告，只悄悄改变渲染结果。
