必须组合配置prefix: 'tw-'、corePlugins.preflight: false和twMerge——prefix解决类名字符串冲突但需手动更新所有class属性，preflight: false恢复原生标签默认样式以防按钮透明等重置问题，twMerge确保动态类合并时padding等属性确定生效，三者缺一不可。
直接用 prefix: 'tw-' + corePlugins.preflight: false + twMerge 三件套，缺一不可。只配其中一项，大概率白忙活。
为什么 prefix: 'tw-' 必须带短横线且手动改所有类名
Tailwind 的 prefix 不是“加个字符串”，而是生成阶段重命名规则。写成 prefix: 'tw'（缺短横线）会拼出 twtext-red-500 这种非法类名，浏览器直接忽略；写成 prefix: 'tw- '（末尾空格）会导致构建失败。
-
tailwind.config.ts中必须写成prefix: 'tw-' - 所有 HTML/JSX 中的 Tailwind 类都得手动补前缀：
class="p-4"→class="tw-p-4" - 动态拼接也不能漏：
className={`flex ${isOpen ? 'hidden' : ''}`→className={`tw-flex ${isOpen ? 'tw-hidden' : ''}` -
@apply写的类会自动加前缀，但字符串插值如text-${color}-500不会被识别，也不会生成对应 CSS
为什么 corePlugins.preflight: false 不是可选项而是必选项
按钮变透明、输入框边框消失、标题字号被压小——这些不是类名撞了，而是 Tailwind 的 @tailwind base 直接重置了 button、input、h1 等原生标签样式。这条规则不靠类名触发，加前缀完全无效。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 必须在
tailwind.config.ts中显式关闭：corePlugins: { preflight: false } - 关掉后不是删掉
@tailwind base引用，而是让构建跳过生成这部分 CSS - Vite / Webpack 项目改完必须重启开发服务器，HMR 不会重建 preflight 规则
- 关闭后，浏览器恢复默认样式，UI 库才能按设计逻辑渲染
为什么 twMerge 不是锦上添花而是运行时刚需
写了 className="tw-p-4 tw-p-2"，浏览器取哪个生效？取决于构建时 CSS 输出顺序——缓存、插件更新、打包配置微调都可能翻车。靠顺序赌运气，线上环境迟早出问题。
立即学习“前端免费学习笔记（深入）”；
-
twMerge('tw-p-4', 'tw-p-2')确定返回'tw-p-2'，运行时解析，不依赖构建顺序 - 它只处理带前缀的类：
twMerge('tw-p-4', 'p-2')不警告也不合并，结果仍是两个类共存 - 搭配
clsx或cn()用更自然：twMerge(clsx('tw-p-4', isOpen && 'tw-p-2')) - 所有传入
twMerge的字符串必须已带tw-前缀，混进一个裸类，整个合并就失效
最容易被忽略的三个落地细节
配置写对了，但没生效？八成栽在这三处：
- HTML/JSX 里有一个 Tailwind 类漏写
tw-，那一处样式就彻底丢失 -
preflight: false改完没重启 dev server，CSS 还在用旧规则 -
twMerge输入里混了一个无前缀类（比如'p-4'），合并逻辑静默失效，DevTools 里也看不出异常
