根本原因是preflight开启、@tailwind指令顺序错误及content路径未覆盖源文件；须设coreplugins.preflight: false、按base/components/utilities顺序书写指令、content精确匹配"./src/*/.{js,jsx,ts,tsx}"并重启服务。
直接上结论：React 18 项目里 Tailwind 样式不生效、按钮变透明、第三方组件样式被覆盖，90% 是 preflight 开着 + @tailwind 指令顺序错 + content 路径漏文件导致的；不是类名写错了，也不是 UI 库有问题。
为什么按钮变透明、输入框没边框？关掉 preflight 才是正解
这是最常被误判的问题。Tailwind 的 @tailwind base 层默认启用 preflight，它会无条件重置 button、input、h1 等标签样式，比如：
button, [type='button'] { background-color: transparent; }
这条规则不依赖任何类名，所以加 !important、调顺序、套 div 都无效。解决方式只有一条：
- 在
tailwind.config.js中明确关闭：corePlugins: { preflight: false } - 别用
important: true去硬压——它只影响工具类（如text-red-500），对标签选择器完全没用 - 关掉后，浏览器原生样式回归，Element Plus、Ant Design、Naive UI 等组件库才能正常渲染
content 路径写错，开发时有、build 后全丢
Vite 和 CRA 都靠 content 字段扫描源码提取类名，路径不精确 = 构建时删掉你写的类。常见错误包括：
- 写成
"./src/**/*"—— 缺扩展名，插件无法识别 JSX/TSX 中的className字符串 - 漏掉
"./public/index.html"—— HTML 中写的类（如<div class="bg-gray-100">）会被 purge 掉 <li>用了 <code>@/components别名但没展开 —— 插件不解析别名，必须写真实路径，例如"./src/components/**/*.{js,jsx,ts,tsx}" - 项目入口是
src/main.tsx却没在 content 里写.tsx后缀 —— 这部分组件里的类名直接消失
正确写法（React + TSX）：
content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"]
@tailwind 指令顺序错，utilities 被 components 覆盖
@tailwind base、@tailwind components、@tailwind utilities 不是随便放的，顺序决定 CSS 优先级：
-
base必须最前（重置和基础样式） -
components居中（自定义组件类，如.btn） -
utilities必须最后（所有px-4、text-lg工具类） - 三者之间不能有空行，也不能被其他
@import或@layer打断 - 别写
@import 'tailwindcss/base'—— 这是旧写法，新版不支持，会静默忽略或报Unknown at rule @import
如果要用 @layer components 覆盖第三方组件样式（比如改 .el-button--primary），确保它写在 @tailwind components 引入之后、@tailwind utilities 之前。
动态类名冲突：别拼字符串，用 twMerge 分参数传
React 组件里写 className={twMerge(`p-2 ${isBig && 'p-6'}`)} 是错的 —— twMerge 不解析字符串插值，${} 是黑盒，它根本看不到 isBig 的逻辑分支。
正确做法是把不同来源的类拆开传：
- 基础类（固定不变）：
"inline-flex items-center px-4 py-2" - 条件类（状态驱动）：
size === 'lg' && 'px-6 py-3' - 用户类（props.className）：
className
然后统一交给 twMerge：
twMerge( "inline-flex items-center px-4 py-2", size === 'lg' && 'px-6 py-3', className)
这样它才能识别 px-4 和 px-6 冲突，并自动剔除前者。顺便提醒：twMerge 不处理自定义类（如 app-button），这类要注册进 extendTailwindMerge 或绕过它。
真正容易被忽略的是：改完 tailwind.config.js 后，Vite 或 Webpack dev server 往往不会自动重载 CSS，必须手动重启服务，否则新配置根本不生效。
