关闭 preflight 是解决按钮透明、input 失边框的根本动作，需在 tailwind.config.js 中设 corePlugins: { preflight: false } 并重启开发服务器。
关掉 preflight 是解决按钮变透明、input 失边框的根本动作
Tailwind 的 @tailwind base 会在构建时注入大量标签级重置规则，比如 button, [type='button'] { background-color: transparent; }。这类规则不依赖类名，所以加前缀、调 import 顺序、套容器都无效。它直接覆盖浏览器默认样式，导致 Element Plus、Ant Design 或原生表单控件渲染异常。
必须在 tailwind.config.js 中显式关闭：
module.exports = {
corePlugins: {
preflight: false,
},
content: ["./src/**/*.{js,ts,jsx,tsx}"],
}
改完后必须重启 Vite / Webpack 开发服务器——HMR 不会重建这部分 CSS，不重启等于没改。
- 不是删掉
@tailwind base的 import，而是让构建跳过生成它 - 关掉后，
img恢复inline行内行为，h1回归默认字号，UI 库才有可靠基础 - 若需保留部分重置（如
box-sizing: border-box），可手动在@layer base里补
prefix: 'tw-' 后所有类名都得手动改，漏一处就丢样式
开启 prefix: 'tw-' 只是让 Tailwind 编译器把 flex → tw-flex、p-4 → tw-p-4，但它不会自动扫描并替换你模板里的 class 字符串。HTML 中写 class="p-4"，浏览器根本找不到对应规则。
立即学习“前端免费学习笔记（深入）”；
正确做法是同步做三件事：
- 在
tailwind.config.js中设prefix: 'tw-'（结尾短横线不能少；'tw'会生成非法类名如twtext-red-500） - 全局搜索替换所有 HTML / JSX 中的 Tailwind 类：
class="p-4"→class="tw-p-4"，className="flex"→className="tw-flex" - 动态拼接时也补前缀：
className={`tw-p-2 ${isOpen ? 'tw-block' : 'tw-hidden'}`}
@apply 写在 CSS 文件里会自动带前缀，但 JS/JSX 里手拼的字符串不会。
twMerge 不是锦上添花，是动态类拼接的刚需
写 className="tw-p-4 tw-p-2"，浏览器按最终 CSS 输出顺序取最后一个生效。但这个顺序受缓存、构建工具链更新影响，极易翻车——今天好好的，明天 tw-p-4 突然又生效了。
twMerge 在运行时解析 class 字符串，自动合并冲突 utility 类：
twMerge('tw-p-4', 'tw-p-2') // → 'tw-p-2'
twMerge('tw-bg-blue-500', 'tw-bg-red-500') // → 'tw-bg-red-500'
但它只认带前缀的类：
- 输入必须全是
tw-开头，混入'p-2'或'btn'，它就当没看见 - 第三方组件类（如
el-button）、手写业务类（如my-card）不受影响，也不参与合并 - 配合
clsx或cn()时，确保每个参数都是带前缀的字符串
CSS 加载顺序和 @layer 是隐藏雷区
Tailwind 默认把工具类注入到 @layer utilities，而你手写的普通 CSS 规则默认落在未声明层级或 @layer base，天然被压制。比如 .title { color: #1e40af; } 永远干不过 text-blue-500。
必须用 @layer 显式声明层级，并控制引入顺序：
@layer base {
h1 { @apply text-2xl font-bold; }
}
@layer components {
.card { @apply bg-white rounded-lg shadow p-4; }
}
@tailwind base;
@tailwind components;
@tailwind utilities;
关键点：
-
@tailwind utilities必须写在所有自定义@layer utilities之后 -
@apply只能在@layer块内或普通规则中使用，不能跨层调用未声明的工具类 - CSS 变量如
--tw-bg-opacity不受prefix影响，你在:root里定义同名变量会静默覆盖 Tailwind 默认值
真正上线时，preflight 关了没重启、模板里漏一个 tw-、twMerge 输了裸类、@layer 顺序写反——任何一项出错，样式都会局部失灵，且难以定位。
