必须写成prefix: 'tw-'，缺短横线会生成非法类名如twtext-red-500导致样式失效；需手动更新所有HTML/JSX中的Tailwind类为带前缀形式；第三方类和自定义类不受影响，且preflight冲突须单独关闭corePlugins.preflight。
prefix必须带短横线，写成tw-而不是tw
写错格式会导致生成非法类名，样式完全不生效。比如prefix: 'tw'会产出twtext-red-500——这不是合法 CSS 类名，浏览器直接忽略。同理，prefix: 'tw- '（末尾空格）会引发构建失败或行为异常。正确写法只有一种：prefix: 'tw-'，且必须放在tailwind.config.js的顶层对象里，不能塞进theme或plugins中。
开了prefix: 'tw-'之后，HTML里所有Tailwind类都得手动加前缀
配置只是告诉 Tailwind “生成时加前缀”，它不会自动帮你重写模板里的 class。你原来写的class="p-4 text-center md:flex"，必须逐个改成class="tw-p-4 tw-text-center tw-md:flex"。漏掉任何一个，那个样式就失效。
-
@apply p-4在 CSS 文件里也会自动转成tw-p-4，无需改写 - 动态拼接的类名，比如
className={`p-${size} text-${color}`}，不会被处理——你得手动写成tw-p-${size} tw-text-${color} - 第三方组件库的类（如
el-button、n-card）和你自己写的业务类（如.my-modal）完全不受影响，也不需要加前缀
prefix只隔离工具类，解决不了preflight或全局标签样式冲突
比如按钮变透明、输入框边框消失这类问题，根源常是@tailwind base里的 preflight 规则直接作用在button、input等原生标签上，跟类名无关。加tw-前缀对这种冲突毫无作用。
- 真正有效的解法是关掉 preflight：
corePlugins: { preflight: false } - 关掉后要重启开发服务器（尤其是 Vite），否则 HMR 不会重新注入 base 样式
- 如果 UI 库依赖某些默认样式（比如 Ant Design 的表单基础样式），关 preflight 后可能需要手动补一点 reset
prefix不是万能隔离方案，容易忽略的三件事
很多人配完 prefix 就以为万事大吉，结果上线后仍有样式打架。根本原因是没意识到它的作用边界非常明确：它只改 Tailwind JIT 编译出的工具类名，其他一切照旧。
- 第三方组件库输出的 HTML 里自带的类（如
ant-btn、v-input）不会被重命名，也不会自动加tw- - 你用
clsx或twMerge合并类名时，传进去的必须已经是带前缀的字符串，否则合并逻辑还是按旧名匹配 - 如果你项目里混用了 Bootstrap 的
.btn和 Tailwind 的tw-bg-blue-500，它们确实不冲突了，但.btn本身可能仍受 Tailwind 的 preflight 影响——这得单独处理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
