关闭 Preflight 需在 tailwind.config.js 中设置 corePlugins.preflight: false，使 Tailwind 跳过生成 @tailwind base 的 CSS；prefix: 'tw-' 后所有 utility class 自动加前缀，不影响自定义类名；important: true 并非万能解药，会引发调试困难与冲突；CSS 加载顺序不可靠，推荐 prefix + preflight: false + twMerge 组合方案。
tailwind.config.js 里 corePlugins.preflight: false 怎么关
关掉 Preflight 就是关掉 Tailwind 默认注入的 @tailwind base，它包含 Normalize.css 和 img、button 等元素重置规则。这些规则一上来就改掉原生样式，比如把 img 设为 display: block，直接导致 html2canvas 截图文字偏下。
在 tailwind.config.js（或 .ts）中设置：
module.exports = {
corePlugins: {
preflight: false,
},
content: ["./src/**/*.{vue,js,ts}"],
}
注意：不是删掉 @tailwind base 的 import，而是让 Tailwind 构建时跳过生成这部分 CSS。如果你用的是 Vue + Vite，改完要重启 dev server，否则 HMR 可能不触发 CSS 重建。
prefix: 'tw-' 后所有类名都得手动加前缀吗
是的，但只影响你写的 Tailwind 类，不影响你自己手写的 .btn、.card 这类业务类名。开启后，bg-blue-500 变成 tw-bg-blue-500，rounded-lg 变成 tw-rounded-lg —— 所有 utility class 都带前缀，天然和 Element Plus 的 .el-button、RuoYi 的 .form-control 互不干扰。
需要同步做两件事：
- 修改
tailwind.config.js的prefix字段 - 把模板里所有 Tailwind 类名手动补上
tw-，比如class="tw-p-4 tw-text-center" - 如果用了
cn()或twMerge()，它们会自动识别前缀，无需额外配置
important: true 是不是万能解药
不是。开启 important: true 会让每个 Tailwind 类都带上 !important，比如 tw-p-4 !important。这确实能压过大部分旧 CSS，但代价很高：
- Element Plus 的
.el-button.is-disabled本身也带!important，你开不开都一样打不过 - 后续调试时，DevTools 里满屏划掉线，根本分不清哪条生效、哪条被覆盖
- Tailwind 官方文档明确说：这不是设计意图，仅用于极端集成场景
真要用，得在配置里显式打开：
module.exports = {
important: true,
// 不要写成 important: '#app'，那只是限定作用域，不是加 !important
}
为什么不能靠 CSS 加载顺序硬刚
把自定义 CSS 放在 Tailwind 后面，看似“后来者居上”，实际非常脆弱。原因有三个：
- Element Plus、Ant Design 这些库的 CSS 是按组件拆分的，
el-button.css和el-input.css可能异步加载，顺序不可控 - Tailwind 的
@layer utilities里，px-4和px-6是两条独立规则，特异性完全相同，谁在输出 CSS 文件里位置靠后，谁就赢 —— 而这个顺序受content扫描路径、插件启用状态、甚至 Node.js 版本缓存影响 - 一旦你升级 UI 库，它新增一个
.el-button:focus-visible规则，你的.btn样式瞬间失效，连报错都没有
真正稳的路只有一条：用 prefix 隔离命名空间，用 preflight: false 放过原生元素，再用 twMerge 在运行时合并类名 —— 这三招组合，才是当前（2026 年）主流项目落地的真实姿势。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
