tailwind 默认配置无法隔离组件样式，必须用@layer、prefix、important或shadow dom之一；preflight无条件重置原生标签，prefix无效，导致ui库样式异常。
单靠 Tailwind 默认配置无法隔离组件样式，必须叠加作用域控制手段——@layer、prefix、important 或 Shadow DOM 中至少一种，否则新组件必然被 UI 库或全局 CSS 覆盖。
为什么 Tailwind 的 preflight 会直接污染子应用？
Tailwind 的 @tailwind base（即 preflight）会无条件重置 button、h1 等原生标签样式，这类规则不依赖类名，prefix 完全无效。例如：
button, [type='button'] { background-color: transparent; }
这个规则在子应用里照样生效，导致 Element Plus 的 .el-button 边框消失、Ant Design 按钮变透明——不是子应用写错了，是 preflight 已经把浏览器默认行为改了。
- 所有子应用若各自启用 preflight，彼此之间会互相覆盖（比如一个设了
html { font-size: 14px }，另一个设成16px） - 主应用若已加载 Tailwind preflight，子应用再引入自己的 preflight，结果就是样式冲突 + 难以调试
- 真正稳的做法：主应用统一提供 scoped 的基础重置（如
.main-app :where(button) { ... }），子应用禁用@tailwind base
用 prefix: 'tw-' 隔离工具类，但 HTML 必须同步改
开启 prefix: 'tw-' 后，flex → tw-flex，text-red-500 → tw-text-red-500，能彻底避开和 .el-button、.card 的类名冲突。
- 错误写法：
prefix: 'tw'→ 生成twtext-red-500（缺短横线，非法类名） - 正确写法：
prefix: 'tw-'，且子应用所有模板中必须写class="tw-flex tw-p-4" - 若子应用用了第三方 UI 库（如 shadcn-vue），需确认其组件内部是否也走 Tailwind 类名路径；否则 prefix 对它无效
- Vite 子应用需在
tailwind.config.js中显式配置，并确保构建产物中所有 class 名都被重写
@layer components 不是作用域开关，而是封装契约
@layer components 不能阻止 tw-bg-red-500 影响其他组件，但它能为你自己写的复合样式提供命名空间和加载顺序控制：
@layer components {
.my-card {
@apply tw-bg-white tw-rounded-lg tw-shadow-sm tw-p-6;
}
}
- 必须配合
class="my-card"使用，不是给tw-类加作用域 - 所有
@layer components样式统一插入到 CSS 输出的components层，优先级高于utilities，低于base - 若子应用共用同一份 Tailwind 配置，不同团队写的
.my-card仍可能冲突——建议按子应用加前缀，如.subapp-order-my-card - UI 库组件（如
shadcn-vue/button）若内联使用tw-类，且未做额外封装，则不受@layer约束
微前端里 Tailwind 隔离最易被忽略的点
很多人卡在构建路径和运行时注入环节，而不是配置本身：
- Vite 子应用若未设置
build.base，产物中<link href="/css/tailwind.css">会向根域请求，实际部署在/subapp-order/css/下 → 404 + 样式白屏 - qiankun 的
styledIsolation对<link rel="stylesheet">和@import无效，Tailwind 编译出的 CSS 文件若用<link>加载，就逃逸到主文档 - CSS 变量（如
--tw-bg-opacity）是全局注册的，prefix 不影响它们；若子应用和主应用都定义了--primary-color，后加载的会覆盖前者 - Shadow DOM 是唯一真正隔离 preflight 的方式，但 Vue/React 渲染默认不进 shadowRoot，且
document.querySelector在子应用内会查不到元素
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
