必须禁用preflight：coreplugins: { preflight: false }，否则旧版ui库因原生标签样式被覆盖而大面积失常；同时需配置prefix: 'tw-'并全量替换模板中类名，配合twmerge确保前缀类正确合并。
preflight: false 是必须项，不是可选项
旧版 CSS 框架（如 Bootstrap 4、Element UI、Ant Design Vue）依赖原生标签默认样式和自定义重置逻辑。Tailwind 的 preflight 插件会注入 * {}、html {}、img { display: block } 等全局规则，直接覆盖这些框架的基础渲染行为——按钮边框消失、表格单元格塌陷、图标对齐错乱都是典型表现。
必须在 tailwind.config.js 中硬编码禁用：
corePlugins: {
preflight: false
}
这不是“建议关闭”，而是构建前必须写死的配置。漏掉这一项，哪怕其他都配对，UI 库组件也会大面积失常。
加 prefix: 'tw-' 隔离类名，但必须全量替换
仅在配置里加 prefix: 'tw-' 不足以避免冲突。Tailwind 只会给它自己生成的工具类加前缀（如 tw-p-4），但不会改你 HTML 里手写的 class="btn btn-primary"，也不会动第三方库输出的 el-button 类。
实际落地时要同步做三件事：
- 配置中写
prefix: 'tw-'（注意是短横线，prefix: 'tw'会生成非法类名twtext-red-500） - 所有 JSX/Vue 模板中原本用的
p-4、text-center全部手动替换成tw-p-4、tw-text-center -
@apply在 CSS 文件里能自动转换，但动态拼接字符串（如className={`p-4 ${isOpen ? 'hidden' : ''}`）必须改成tw-p-4和tw-hidden
用 twMerge 合并动态 class，但只认带前缀的类
即使加了前缀，仍可能在组件里写出 tw-p-4 p-2 这种混用——浏览器按 CSS 输出顺序取最后一个生效，而这个顺序受构建缓存、插件加载时机影响，不可控。
twMerge 能运行时识别并合并冲突 utility 类：
twMerge('tw-p-4 tw-p-2') // → 'tw-p-2'
twMerge('tw-p-4 tw-mt-2') // → 'tw-p-4 tw-mt-2'
但它有个硬限制：输入字符串里**所有类都必须带 tw- 前缀**。混用 tw-p-4 和 p-2，它既不报错也不处理，直接透传，等于没用。
别碰 variants，Taro/uni-app/Vue2 都不支持
老项目常见想用 hover:tw-bg-blue-500 控制状态样式，但 variants 字段在 Taro 4、uni-app、Vue CLI 4.x 等旧构建链里根本无法解析——写了等于白写，编译时静默忽略，连警告都没有。
真要响应 hover/focus，只能走两种路：
- 用
@layer components手写带:hover的完整 CSS 规则（注意 WXSS 不支持冒号，小程序场景下得用postcss-class-rename转成hover--bg-blue-500） - 用 JS 控制 class 切换：
className={isActive ? 'tw-bg-blue-500' : 'tw-bg-gray-100'}
最易被忽略的是：改完配置后必须重启开发服务器，否则 preflight: false 和 prefix 变更不会生效；而 twMerge 的输入校验是运行时行为，模板里漏改一个类名，问题就藏在交互路径里，等用户点开才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
