结论：需组合使用 preflight: false、prefix: 'tw-' 和 twmerge 才能彻底解决样式冲突——关预检恢复原生样式，加前缀隔离工具类，用 twmerge 合并动态类；配置后须重启开发服务器。
直接说结论：important: true 和 prefix 都能缓解冲突，但解决的是完全不同的问题——前者是靠权重硬压，后者是靠改名避让。选错配置，样式该丢还是丢。
为什么开了 important: true 按钮还是透明？
因为按钮变透明的根源不是类名被覆盖，而是 Tailwind 的 @tailwind base（即 preflight）直接重置了 button 标签样式：
button, [type='button'] { background-color: transparent; }
这条规则不依赖任何类名，important: true 对它完全无效。它只影响你写的 text-red-500 这类工具类，不影响标签选择器。
- 必须关掉 preflight 才能真正释放原生按钮默认样式：
corePlugins: { preflight: false } -
important: true必须写成布尔值，不是字符串"true"，否则配置静默失效 - 全局开
important: true会让所有工具类带!important，后续用!text-sm这种手动修饰符就失去意义
prefix: 'tw-' 能不能一劳永逸？
不能。它只改类名，不碰权重、不改预检、不干预第三方组件内部样式。
比如你写了 class="flex p-4"，而项目里已有手写的 .flex { display: inline-flex; }，开了 prefix: 'tw-' 后，Tailwind 生成的是 .tw-flex，你的 .flex 照常生效——这确实是隔离，但前提是：你得把模板里所有 Tailwind 类都手动改成 tw-flex、tw-p-4。
- 错误写法：
prefix: 'tw'→ 生成twtext-red-500（非法类名，样式不生效） - HTML 中漏写前缀，比如仍写
class="p-4"→ Tailwind 不匹配，样式彻底丢失 -
@apply生成的类、自定义 CSS、第三方组件类（如n-button）全都不受prefix影响
真正有效的组合方案是什么？
单一配置撑不住真实项目。要同时处理类名冲突、预检重置、动态类合并三类问题：
- 关 preflight：
corePlugins.preflight: false，把基础样式控制权还给浏览器和 UI 库 - 加前缀：
prefix: 'tw-'，隔离你写的工具类，避免和 Bootstrap / 手写.container等同名冲突 - 用
twMerge处理动态类合并，比如className={twMerge('p-2', isBig && 'p-6')}，自动剔除被覆盖的p-2
注意：改完 tailwind.config.js 后，Vite 或 Webpack dev server 往往不会自动重载 CSS，必须手动重启，否则新配置不生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
