关掉preflight是最根本解法，因其重置button、input等原生标签样式导致UI库组件异常；需在tailwind.config.ts中设corePlugins: { preflight: false }并重启服务器。
直接关掉 preflight 是最根本的解法，按钮变透明、标题变小、输入框边框消失这些现象，90% 都不是类名撞车，而是 Tailwind 的 @tailwind base 在重置原生标签样式。
为什么按钮变透明？不是类名冲突，是 preflight 在“动 HTML 标签”
这类问题的根因是 Tailwind 自动生成的这段 CSS：
button, [type='button'] { background-color: transparent; }
它不依赖任何类名，直接作用在 button 元素上。所以无论你配 prefix: 'tw-' 还是调换样式加载顺序，都无效。
- 必须在
tailwind.config.ts中设corePlugins: { preflight: false } - 改完后必须重启开发服务器（Vite/HMR 不会自动刷新这部分 CSS）
- 关闭后，
h1恢复浏览器默认字号，img不再被强制设为display: block，UI 库才有可靠基础
什么时候该用 important: true？只在 preflight 关不掉时硬顶
如果你无法修改第三方库的加载逻辑（比如 UI 库样式由 CDN 注入、或构建流程锁死），又急需让 tw-bg-blue-500 盖过 .el-button--primary 的背景色，才启用 important: true。
- 必须写成布尔值
important: true，写成字符串"true"会静默失效 - 全局开启会破坏你后续用
!tw-text-sm这类手动!前缀的控制粒度 - 更稳妥的做法是局部加：用
important: '#app'把影响范围锁死在容器内
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"，漏一个就断链 - 第三方插件（如
tailwindcss-animate）默认不识别前缀，需查文档确认是否支持
真正容易被忽略的是三件事必须同时到位：preflight 关闭、prefix 同步改 class、所有工具类字符串进 twMerge —— 少一个，样式就可能在某个页面、某个状态、某次热更新后突然失灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
