根本原因是未同时关闭preflight、添加tw-前缀、使用twMerge合并动态类及安装tailwindcss-forms插件；仅做其一无法解决button透明、input边框异常、动态类冲突及表单不一致等问题。
Tailwind CSS 生成的样式不一致，根本原因不是配置写错了，而是你没关 preflight、没加 prefix、也没用 twMerge——三者缺一不可。只做其中一项，button 还是透明，input 边框还是忽粗忽细，动态类名还是互相打架。
为什么 button 变透明、input 边框消失？必须关 preflight
这不是类名被覆盖，而是 Tailwind 的 @tailwind base（即 preflight）直接写了：
button, [type='button'] { background-color: transparent; }这条规则靠标签选择器生效，加 tw- 前缀、调加载顺序、套 !important 全部无效。它在构建时就注入了，且优先级高于 .el-button 或 .n-button。
- 在
tailwind.config.js或.ts中设corePlugins: { preflight: false } - 改完必须重启开发服务器——HMR 不会重建这部分 CSS
- 如果只想保留部分重置（如
box-sizing），可手动重写：@layer base { * { box-sizing: border-box; } }
为什么 class="p-4" 没效果？prefix 必须配全且写对
prefix: 'tw-' 只改 Tailwind 工具类的生成逻辑，不改你代码里写的类名字符串。漏一处，样式就丢一处。
立即学习“前端免费学习笔记（深入）”；
- 正确写法是
prefix: 'tw-'（结尾短横线不能少）；prefix: 'tw'会生成非法类名如twtext-red-500 - HTML/JSX 中所有 Tailwind 类必须手动加前缀：
class="tw-p-4 tw-rounded"，不是“大部分改了就行” -
@apply生成的类自动带前缀，但手写 CSS 里的.my-btn、UI 库的.el-input完全不受影响
为什么 className={`p-2 ${isBig ? 'p-6' : ''}`} padding 总是不对？twMerge 是刚需
不加 twMerge，浏览器按 CSS 文件输出顺序取最后一个生效；而这个顺序受缓存、插件版本、打包配置影响，极不稳定。
-
twMerge('tw-p-4', 'tw-p-2')→ 确定返回'tw-p-2' -
twMerge('tw-p-4', 'p-2')→ 返回'tw-p-4 p-2'，twMerge直接无视无前缀类，也不警告 - 搭配
clsx或cn()时，所有参数都得是tw-开头：twMerge(clsx('tw-p-4', isBig && 'tw-p-6'))
表单控件长得不一样？tailwindcss-forms 插件不是可选，是必要
appearance-none 只是移除了默认 UI，但没补交互反馈、没统一 padding、font-size、line-height，更没处理 Safari 对 ::placeholder 的兼容问题。
- 运行
npm install @tailwindcss/forms - 在
tailwind.config.js的plugins数组中加require('@tailwindcss/forms') - 插件启用后，
<select class="form-select"></select>就能跨浏览器一致渲染，无需手动加图标或pointer-events-none - 旧版 Safari（iOS 13.3 及更早）对
appearance: none支持不稳，需配合@supports (-webkit-appearance: none)降级
真正麻烦的不是哪条配置写错了，而是这四件事必须同时落地：关 preflight、加 tw- 前缀、用 twMerge 合并动态类、装 @tailwindcss/forms 处理表单——漏掉任意一个环节，样式不一致就会在某个浏览器、某个组件、某个条件分支里突然冒出来。
