关掉 preflight 是最直接有效的解法，因其全局重置 button、input 等原生标签样式导致 ant design 组件异常；只需在 tailwind.config.ts 中设置 coreplugins: { preflight: false } 即可恢复默认行为。
关掉 preflight 是最直接有效的解法，其他方案都是绕路或治标。
为什么按钮变透明、输入框塌陷？根源在 @tailwind base
Ant Design 的 Button、Input 等组件依赖浏览器对 button、input 标签的原生默认样式（比如 button 有默认背景色和内边距）。Tailwind 的 @tailwind base 会通过 preflight 规则重置所有基础标签：把 button 设为 background-color: transparent，把 input 的 margin、padding、line-height 全部归零。这不是类名冲突，是全局样式覆盖。
-
preflight是 Tailwind 的「基础重置层」，不靠类名触发，所以加prefix或调换 CSS 加载顺序都无效 - 错误现象：Button 背景透明、文字看不见；Input 高度异常、文字贴顶；
h1字号被压小 - DevTools 里能看到
button { background-color: transparent; }这条规则来自@tailwind base，且它没用任何类选择器
怎么关掉 preflight？只改一行配置
在 tailwind.config.ts（或 .js）里明确禁用它：
corePlugins: {
preflight: false,
}
- 关掉后，
@tailwind base不再注入那套全局重置，Ant Design 的原始样式逻辑立刻恢复 - 你仍可正常使用所有 Tailwind 工具类：
tw-flex、tw-text-blue-600等（前提是开了prefix）或flex、text-blue-600（没开prefix） - 不需要动构建配置、不用改 HTML 结构、也不用调整样式加载顺序
- ⚠️ 注意：不是注释掉
@tailwind base—— 那样会连box-sizing: border-box等必要规则也丢掉；而是让 Tailwind 主动跳过preflight阶段
什么时候才考虑 important: true 或 prefix？
important: true 和 prefix: 'tw-' 解决的是另一类问题，别混用：
-
important: true让所有 Tailwind 类自动带!important，能压过 Ant Design 的部分组件类（如.ant-btn），但会破坏你后续手动写!text-sm的控制力，且对button标签本身无效 -
prefix: 'tw-'只改工具类生成的类名（tw-p-4），完全不影响@tailwind base，也管不了.ant-btn这种第三方类名 - 如果已关
preflight，但发现某些 Tailwind 类（比如text-red-500）还是被 Ant Design 组件内部样式盖住，再局部用important: '#app'锁定容器范围
真正卡住的点永远是 preflight —— 它无声无息地重写了浏览器默认行为，而 Ant Design 正是靠这些默认行为工作的。别的配置都得先让它退场，才能谈共存。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
