关掉 preflight 是根治按钮透明、标题字号异常、img 布局错位的唯一解法——因其自动重置 button/h1/img 等原生标签样式，且不受类名、prefix、!important 或加载顺序影响。
关掉 preflight 是唯一能根治按钮变透明、标题字号异常、img 布局错位的解法——不是类名撞了，是 Tailwind 自动注入的 @tailwind base 在直接重置 button、h1、img 这些原生标签。
为什么按钮变透明？不是类名冲突，是 preflight 在“动 HTML 标签”
你看到的按钮透明、输入框边框消失、h1 突然变小，90% 都不是因为你写了 bg-blue-500 和 el-button 撞了。真正起作用的是这段 CSS：
button, [type='button'] { background-color: transparent; }
它不依赖任何类名，不认 prefix，不买 !important 的账，也不受加载顺序影响。只要 preflight 开着，它就稳稳生效。
-
corePlugins: { preflight: false }必须写在tailwind.config.ts里，不是删掉@tailwind base导入 - 改完必须重启开发服务器（Vite/HMR 不会刷新这部分 CSS）
- 关掉后，
h1恢复浏览器默认字号，img不再被强制设为display: block，UI 库才有可靠基础
prefix: 'tw-' 只管工具类生成，漏一个就断链
prefix 的作用非常窄：把 flex → tw-flex，p-4 → tw-p-4。它对 @apply、自定义类、第三方组件类（如 .el-button）完全无效。
- 配置必须带短横线：
prefix: 'tw-'；写成'tw'会生成twtext-lg这种非法类名 - HTML/JSX 中所有 Tailwind 类必须手动加前缀：
class="tw-flex tw-p-4"，漏一个，浏览器就找不到规则 - 动态拼接时混用裸类（比如
className={`tw-p-4 ${isOpen ? 'hidden' : ''}`}），twMerge就失效且无警告 - 第三方插件（如
tailwindcss-animate）默认不识别前缀，需查文档确认是否支持
important: true 是“强行赢过”，只在 preflight 关不掉时硬顶
当 UI 库样式由 CDN 注入、或构建流程锁死无法修改 preflight 时，才考虑 important: true。它会让所有 Tailwind 工具类自动带上 !important，比如 tw-bg-blue-500 编译为 background-color: #3b82f6 !important。
- 必须写成布尔值
important: true，写成字符串"true"或"#app"会静默失效 - 全局开启会破坏你后续用
!tw-text-sm这类手动!前缀的控制粒度 - 更稳妥的做法是局部锁定：
important: '#app'，把影响范围限制在根容器内 - 它不能解决
@layer base冲突，只是靠权重压过——如果 UI 库也用了!important（比如.el-button--primary:hover），依然可能翻车
真正上线前，三件事必须同时到位：preflight: false、prefix: 'tw-' 同步改 class、所有 Tailwind 类进 twMerge —— 少一个，样式就可能在某个页面、某个状态、某次热更新后突然失灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
