必须组合配置 prefix、coreplugins.preflight: false 和 twmerge——仅加 prefix 不重写模板类名导致样式丢失，不关 preflight 会因全局重置破坏 ui 库样式，不启用 twmerge 则动态类拼接时 padding 等属性层叠不可控；css 变量 --tw-* 不受 prefix 影响，全局定义会静默覆盖 tailwind 默认值。
必须组合配置 prefix、corePlugins.preflight: false 和 twMerge，缺一不可——只改类名前缀会丢基础样式，只关 preflight 会撞类名，不合并动态类会在运行时随机失效。
为什么单纯加 prefix: 'tw-' 会失效
它只让 Tailwind 编译器生成带前缀的类（如 tw-p-4），但不会自动重写你模板里的 class="p-4"。漏改一处，浏览器就找不到对应规则。
-
prefix: 'tw'（缺短横线）→ 生成twtext-red-500，不是合法类名，CSS 不生效 -
prefix: 'tw- '（末尾空格）→ 构建失败或行为异常 - @apply 写在 CSS 文件里能自动转前缀，但 JSX 中拼接的
className={`flex ${isOpen ? 'hidden' : ''}`必须手动改成tw-flex和tw-hidden - 第三方组件类（如
el-button）、手写.my-form、@layer自定义类全都不受影响，得你自己隔离
为什么必须关掉 corePlugins.preflight: false
Tailwind 的 @tailwind base 包含 Normalize.css + 大量原生标签重置（比如 button { background-color: transparent; }），这些规则不靠类名触发，prefix 完全无效。UI 库和 jQuery 插件依赖这些默认样式，一加载就“归零”。
- 关完必须重启开发服务器，HMR 不会重建这部分 CSS
- 别删
@tailwind base的 import —— 那没用；要的是构建时跳过编译 - 关掉后，
img、button、h1等标签恢复浏览器原生表现，UI 库才能正常渲染
为什么 twMerge 不是可选项而是必选项
动态拼接类名时（如 className={`${base} ${isOpen ? 'tw-hidden' : 'tw-block'}`），两个 padding 类共存会导致层叠顺序不可控：构建缓存、工具链更新、CSS 输出位置变化都可能让最终生效的类变成意外的那个。
-
twMerge('tw-p-4', 'tw-p-2')→ 只保留tw-p-2，不依赖 CSS 加载顺序 - 它只处理带前缀的类，混用
p-4和tw-p-4时完全不识别，也不报错 - 如果你用
clsx或自定义 class 工具，必须确保所有输入都是带tw-前缀的字符串
CSS 变量冲突是隐藏雷区
prefix 对 --tw-bg-opacity、--tw-text-opacity 这类变量名完全无效——它们由 Tailwind 源码硬编码，不会加前缀。你在 :root 里定义同名变量，就会静默覆盖 Tailwind 的默认值。
-
bg-black/30渲染异常、border-t-blue-500颜色变浅，往往就是--tw-border-opacity被劫持了 - 不要在全局作用域定义以
--tw-开头的变量，这是 Tailwind 官方保留前缀 - 第三方 UI 库（如 Naive UI）若也用
--tw-，就得靠:where(.my-app) { ... }限制作用域
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
