关掉 preflight 是解决按钮变透明、输入框边框消失、标题字号被压小的刚性前提；必须在 tailwind.config.ts 中设置 corePlugins: { preflight: false } 并重启开发服务器。
关掉 preflight 是解决按钮变透明、输入框边框消失、标题字号被压小这类问题的刚性前提——不是可选项，不关它，其他所有配置都只是在补漏。
为什么按钮变透明跟类名无关，只跟 preflight 有关
Tailwind 的 @layer base 里有一段硬编码的重置规则：button, [type='button'] { background-color: transparent; }。它不依赖任何类名，也不受 prefix 或 important 影响，直接作用于 HTML 标签。Element Plus 的 .el-button、Naive UI 的 .n-button 都基于浏览器原生 button 行为渲染，而这段规则把基础样式全清空了。
常见错误现象包括：
- 按钮点击无反馈、hover 失效
-
<input>边框消失、<select></select>下拉箭头错位 -
<h1></h1>字号被压到 1rem，<img alt="如何解决Tailwind CSS与UI组件库的冲突？" >自动变成display: block
必须在 tailwind.config.ts 中设置：
立即学习“前端免费学习笔记（深入）”；
corePlugins: {
preflight: false
}
配完后必须重启开发服务器（Vite/HMR 不会自动重建这部分 CSS）。
prefix: 'tw-' 只隔离工具类，不碰重置逻辑
prefix 的作用是让 text-lg 编译成 tw-text-lg，从而避开和 .el-button、.n-input 这类第三方类名冲突。但它对以下三类完全无效：
-
@tailwind base生成的标签级重置（比如上面那个button { background: transparent }） - 你自己写的
.btn、.card等自定义类 - UI 库内部的类（
.el-button--primary、.n-button）
务必注意：
- 写成
prefix: 'tw-'（结尾带短横线），'tw'会生成非法类名如twtext-lg - HTML/JSX 中所有 Tailwind 类必须手动加前缀：
class="tw-p-4 tw-flex"，漏一个就断链 - 第三方插件（如
tailwindcss-animate）默认不识别prefix，需查文档确认是否支持
混用 Tailwind 类和 UI 组件时的安全边界
原则是：Tailwind 只管布局与修饰，不碰组件语义样式。
- ✅ 安全用法：
tw-mt-4、tw-w-full、tw-hidden sm:tw-block - ❌ 危险用法：
tw-p-3、tw-border、tw-bg-blue-500—— 这些会直接覆盖 UI 库内置的 padding、border、background
若真要微调组件样式，优先走显式路径：
- Vue 中用
:deep(.el-button)或 scoped style - CSS 文件中用
@layer components覆盖：@layer components { .el-button--primary { @apply bg-indigo-600 hover:bg-indigo-700; } }
@layer components 天然比 @layer utilities 优先级高，无需 ! 就能压过 tw-text-red-500。
表单控件异常？先装 tailwindcss-forms，再检查加载顺序
原生 <input>、<select></select> 在 Tailwind 下显示异常，本质是浏览器私有样式没被统一处理。默认 preflight 不动它们，得靠插件补位：
- 安装：
npm install tailwindcss-forms --save-dev - 在
tailwind.config.ts的plugins数组中加入：require('tailwindcss-forms')
但要注意：如果 UI 库（如 Element Plus）的 CSS 已经加载，form-input 规则可能被划掉——说明被更高优先级样式覆盖了。此时应确保 UI 库 CSS 在 @tailwind base 之后引入，或干脆关掉 preflight 后物理隔离两者作用域。
真正容易被忽略的是：动态拼接 class 时，twMerge 只认带前缀的类。写 twMerge('tw-p-2 p-3') 不会报错，但浏览器按层叠顺序取后者，而顺序取决于构建时 CSS 输出位置，缓存一更新就翻车。
