必须关闭tailwind的preflight插件，否则其内置重置样式会覆盖ant design组件所需的原生标签默认样式，导致button背景透明、input边框消失、modal层级错乱等问题；关闭后需重启开发服务器，且ant design样式应早于tailwind css引入。
关掉 preflight 是必须的第一步，否则 Ant Design 的按钮、表单、弹窗等组件会直接“失效”——比如 Button 背景变透明、Input 边框消失、Modal 层级错乱。这不是 Ant Design 本身的问题，而是 Tailwind 的 @tailwind base 主动重置了 button、input、h1 等原生标签样式，和 Ant Design 依赖的默认行为冲突。
为什么必须设 corePlugins.preflight = false
很多人误以为删掉 @tailwind base 引用或注释掉它就行，其实不行。Tailwind 构建时仍会注入预设重置规则，除非显式关闭 preflight 插件。
-
preflight: false是构建期开关，让 Tailwind 完全跳过生成那套重置 CSS，不是“禁用某条规则” - 改完配置后必须重启开发服务器（Vite/webpack dev server），HMR 不会重新编译 base 层
- 不关
preflight，哪怕只用tw-*前缀，button标签的display、vertical-align、font等基础属性仍会被覆盖
Ant Design 样式加载顺序不能靠“后引入就赢”
CSS 层叠优先级不只看文件引入顺序，还受构建工具注入时机、@layer 声明、是否启用 CSS 模块化影响。单纯把 ant-design-vue/dist/reset.css 放在 @tailwind base 后面，大概率无效。
- 推荐做法：在
main.ts或全局入口中，先import 'ant-design-vue/dist/reset.css'，再import './styles/tailwind.css' - 如果用 Vite +
unplugin-vue-components，确保ant-design-vue的样式没被按需加载机制漏掉——检查插件配置里importStyle: 'css'是否开启，或手动导入完整 CSS - 遇到弹窗遮罩层（
.ant-modal-mask）被 Tailwind 的z-50类覆盖？别硬调z-60，先确认 Ant Design 的全局样式确实已加载且未被 PurgeCSS 误删
prefix 配置对 Ant Design 组件无效，别白费劲
设了 prefix: 'tw-' 后，你写 className="tw-p-4" 是有效的，但 Button、Table 这些组件内部类名（如 .ant-btn）完全不受影响——Tailwind 不会扫描或重写第三方库的 class 名。
- 想给 Ant Design 组件加 Tailwind 类？可以，但只能加在组件外层容器上，例如：
<div classname="tw-mt-4"><button>提交</button></div> - 不要试图在组件 props 里传
className并期望它作用到内部根节点（Ant Design 多数组件不透传className到最外层 DOM） - 需要微调组件内样式？用
:deep(.ant-btn)或ant-btn的原生类名写 CSS，而不是指望tw-前缀能穿透
真正容易被忽略的点是：PurgeCSS 可能误删 Ant Design 用到的动态类名（比如 ant-table-row-hover），尤其当你用字符串拼接 className 或运行时生成类名时。别只盯着 preflight，检查 content 配置是否扫到了 Ant Design 的组件文件路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
