必须关闭 coreplugins.preflight 以解决按钮透明、标题字号异常、img 布局错位等问题，因其预检规则硬重置原生标签样式；启用 prefix: 'tw-' 仅影响工具类生成，需配合 twmerge 严格处理带前缀类。
必须关掉 corePlugins.preflight，否则按钮变透明、标题字号异常、img 布局错位等问题无法根治——这不是加载顺序或类名前缀能绕开的问题。
为什么按钮变透明？根源在 @tailwind base 的预检规则
Tailwind 的 preflight 会直接重置原生标签样式，例如：
button, [type='button'] { background-color: transparent; }
这段 CSS 不依赖任何类名，也不受 prefix 或 important 影响。它在构建时硬编码进全局 CSS，覆盖 Element Plus、Naive UI 等库对默认行为的依赖。
-
preflight: false是配置项，不是注释或删除@tailwind base导入 - 改完必须重启 Vite/HMR 服务，否则旧 CSS 缓存仍在
- 关掉后，
h1恢复浏览器默认字号，img不再强制display: block，UI 库才能正常渲染
prefix: 'tw-' 只管工具类生成，不碰 preflight 和第三方类
开启 prefix: 'tw-' 后，text-lg → tw-text-lg，但它完全不影响以下三类：
-
@apply写的自定义类（需手动加前缀或重写） - 你写的
.btn、.card等业务类名 - Element Plus 的
.el-button、Naive UI 的.n-button—— 它们根本不在 Tailwind 编译流程里
常见错误：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
-
prefix: 'tw'（缺短横线）→ 生成twtext-lg，非法类名 - HTML 中漏写
tw-，比如仍写class="p-4"，浏览器找不到规则 - 动态拼接 class 时混用裸类：
className={`tw-p-4 ${isOpen ? 'hidden' : ''}`→hidden不带前缀，twMerge失效且无警告
twMerge 是运行时必需品，不是可选装饰
写 className="tw-p-4 tw-p-2" 时，浏览器按 CSS 输出顺序取最后一个生效，但这个顺序受构建缓存、插件顺序影响，极不稳定。
twMerge 在运行时解析字符串，自动合并冲突 utility 类：
-
twMerge('tw-p-4 tw-p-2')→'tw-p-2'（后者覆盖前者） -
twMerge('tw-p-4 p-2')→ 仍返回'tw-p-4 p-2'，但浏览器层叠逻辑不可控，极易翻车 - 输入必须全是带
tw-前缀的类，混入第三方类或裸类等于没用
它不依赖加载顺序，适合 Vue 的响应式 class 绑定场景，但前提是所有 Tailwind 类都已严格加前缀。
真正上线前，漏掉任意一项都会导致样式局部失灵：所有模板里的 Tailwind 类一个都不能漏改；preflight: false 配完必须重启验证；twMerge 输入必须 100% 是带前缀的类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
