如何解决Tailwind CSS与Ant Design共存时样式优先级问题？
禁用 preflight 是最直接有效的解法，因其重置 button 等标签样式导致 Ant Design 组件失去默认继承；需配合 important: "#app" 或调整 @layer 顺序、CSS 加载顺序来适配复杂场景。
禁用 preflight 是最直接有效的解法，90% 的按钮透明、边框消失、间距错乱问题都源于它——不是你写错了 class，而是 button { background-color: transparent } 这条规则天生就比 .ant-btn 早一步生效。
为什么禁用 preflight 能解决问题
Tailwind 的 preflight 属于 @layer base，它不靠类名触发，而是直接重置 HTML 标签（button、input、h1 等）。Ant Design 的样式是类选择器（如 .ant-btn），特异性天然低于标签选择器 + !important 组合。但更关键的是：preflight 的重置规则会清空 Ant Design 依赖的默认浏览器行为（比如 button 默认有背景和边框），导致组件“没样式可继承”。
禁用后，Ant Design 的基础样式能正常起效，你再用 Tailwind 工具类微调（如 mt-2、text-sm）就不会被底层重置干扰。
操作方式很简单：
- 打开
tailwind.config.ts - 在
corePlugins中设为preflight: false - 重启开发服务器
什么时候不能关 preflight？改用 important: "#app"
如果你项目里已有大量非 Ant Design 的裸 HTML 元素（比如富文本渲染出的
此时应启用局部 important，只让 Tailwind 类在特定容器内生效：
- 配置项必须写成
important: "#app"（字符串，不是布尔值） -
#app要和你的根容器 ID 完全一致（如） 这样生成的text-red-500会变成color: #ef4444 !important，但仅限于#app内部
Ant Design 组件若也在 #app 内，其原有 !important 规则仍优先（因选择器更具体），所以不会破坏它
Umi Max + Antd v6 + Tailwind v4 的 layer 顺序冲突
这个组合下，@layer 声明顺序错乱是隐形杀手。Ant Design 的 CSS-in-JS 会把 @layer antd 插入 <head> 最前面，而 Tailwind 的 @layer base 在后面——结果 preflight 反而覆盖了 antd。
解决要点：
不要在 global.css 里 @import 'tailwindcss'，改用 PostCSS 插件方式引入，避免多一份 @layer 声明
手动调整 @layer 声明顺序：在自定义 CSS 入口顶部显式写 @layer antd, theme, base, components, utilities;
确保 antd/dist/reset.css 不被自动加载（Umi 插件可能默认加），它未分层，会无条件压过所有 @layer 内容
检查 DevTools 的 <style> 标签顺序，确认 @layer antd 出现在 Tailwind 的 @layer base 之前
别碰全局 important: true，除非你清楚代价
它会让所有 Tailwind 类带 !important，包括 mb-4、flex、hidden。一旦开启，你就再也无法用普通 CSS 类或内联样式覆盖它们——连 style="display: block" 都会被 hidden !important 干掉。
它只适合极少数场景：
嵌入 iframe 的老系统，你完全无法控制其样式加载时机
使用 Ant Design Vue v4 这类强封装库，且无法修改其构建流程
已上线项目，重构成本过高，只能硬顶
真正容易被忽略的是：即使开了 important: "#app"，也要确保 Ant Design 的 CSS 文件在 Tailwind 之前加载（通过 index.html 中 <link> 顺序或构建插件配置）。加载顺序错，layer 和 important 都救不了。
