关掉 preflight 是解决按钮变透明、输入框边框消失等问题的最直接手段，因其重置规则 button, [type='button'] { background-color: transparent; } 权重高且不受类名前缀影响；需在 tailwind.config.ts 中设 corePlugins: { preflight: false } 并手动补基础样式。
关掉 preflight 是解决按钮变透明、输入框边框消失这类问题的最直接手段，不是加 !important 或改类名顺序能绕过去的。
为什么第三方组件库的按钮总变透明？
根本不是你写错了类名，而是 Tailwind 的 @layer base（即 preflight）在重置所有 button 标签：它写了 button, [type='button'] { background-color: transparent; }。这条规则不依赖任何类名，权重是 0,0,1,1，比 .el-button 或 .n-button 这类类选择器还早生效、还高优先级。
- 在 DevTools 的 Styles 面板里找带
data-tailwind="true"的button规则，基本就是它在起作用 - 禁用 Tailwind CSS 后按钮恢复正常？说明冲突源就是 preflight，不是加载顺序或类名污染
-
prefix: 'tw-'对它完全无效——前缀只改类名，不碰这条纯标签规则
怎么安全地关掉 preflight 并补基础样式？
在 tailwind.config.ts 中设 corePlugins: { preflight: false }，然后手动补回关键重置项，否则 input、textarea 会回归原生丑态。
- 至少补上
* { box-sizing: border-box; }，这是现代布局前提 - 表单控件要重置
border、outline、font继承，不然@tailwindcss/forms插件也会失效 - 补的 CSS 必须写在主入口 CSS 文件中，且放在
@tailwind base之后、@tailwind components之前 - 别用
@apply写响应式或状态类（如sm:p-2、hover:bg-blue），@layer base阶段这些工具类还没注入
想局部覆盖组件库样式，别堆 !text-red-500
直接在组件上叠加 Tailwind 工具类（比如给 el-button 加 tw-bg-indigo-600）容易和组件内部的 padding、background 打架。更可控的方式是收进 Tailwind 的层级体系里。
立即学习“前端免费学习笔记（深入）”；
- 在 CSS 文件中写：
@layer components { .el-button--primary { @apply bg-indigo-600 hover:bg-indigo-700; } } - 确保
@tailwind components在@tailwind utilities之前引入，否则你的覆盖规则会被text-red-500这类工具类压过 -
@layer components天然比@layer utilities优先级高，不需要!就能生效 - 避免在
@layer base外直接写普通 CSS 规则去覆盖，它们默认落在低优先级层，大概率被忽略
什么时候才考虑 important: true？
它确实能强行压过 preflight 的标签规则，但代价是所有 Tailwind 工具类都带上 !important，后续想用 !text-sm 做局部微调就失效了——因为变成 !text-sm !important，语法非法。
- 只在无法控制样式加载顺序 + 又不能关 preflight 的场景下用，比如嵌入老系统 iframe、集成强封装富文本编辑器
- 更稳妥的是局部锁定：
important: '#app'，让影响范围严格限制在根容器内，不影响弹窗、Tooltip 等浮动内容 - 写成
important: "true"或important: "#app"以外的字符串都无效，必须是布尔值或合法 CSS 选择器字符串
真正难的不是写几行 CSS，而是意识到 preflight 是一条“隐身规则”——它不靠类名触发，也不受前缀控制，只有关掉它，第三方组件库才能按设计意图渲染。其他所有技巧，都是在这条前提成立之后才开始生效的。
