tailwind样式泄漏的根本原因是其css默认注入全局head，未隔离作用域；解决需动态插入、路径限制、前缀重写等组合方案。
微前端子应用里 Tailwind 样式泄漏的根本原因
不是 Tailwind 写得不隔离，而是它默认生成的 CSS 仍注入到全局 ，和主应用、其他子应用的样式共享同一作用域。微前端框架（如 qiankun、micro-app）若未启用 Shadow DOM 或未做样式沙箱，所有子应用的 @tailwind utilities 输出都会平铺在同一个 CSSOM 里，选择器权重一模一样时，谁后加载谁赢。
qiankun 中开启 Tailwind 隔离的实操要点
styledIsolation: true 对 Tailwind 无效——它只管子应用自己 <style></style> 标签的动态挂载，不处理你构建出的 tailwind.css 文件。真正起效的是：
- 必须把
tailwind.css的 import 拆进子应用自己的入口（如entry.js），而非主应用统一加载 - 配合
qiankun的render钩子，在挂载前用document.createElement('style')动态插入，并设data-qiankun属性便于后续清理 - 禁用
tailwind.config.js中的content路径跨子应用扫描（比如别写"../src/**/*"），否则打包会把其他子应用的 class 也塞进来
micro-app 下 Tailwind 样式“假装隔离”的坑
micro-app 的 scoped 模式本质是 class 名哈希化，但 Tailwind 工具类（如 text-lg、flex）是全局声明的，不受 scoped 影响。结果就是：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 子应用写的
<div class="text-lg flex"> 仍走全局规则，可能被主应用同名类覆盖 <li>如果子应用用了 <code>@apply提取组件，且没加前缀（如.app-a-card），该组件样式也会泄漏 -
micro-app不拦截<link rel="stylesheet">，所以你直接import './tailwind.css'依然会污染全局 - 用
postcss-prefixwrap插件，给整个tailwind.css加包裹选择器：.subapp-a & - 在子应用根节点加唯一 class：
<div id="subapp-a" class="subapp-a">...</div> - 确保
tailwind.config.js的content只扫本子应用路径，避免误提其他子应用的 class - 禁用
important: true，它会让前缀失效（!text-red-500会跳过.subapp-a作用域）
真正可控的隔离方案：前缀 + 构建时重写
放弃依赖框架自动隔离，改用静态前缀是最稳的。不是加在 HTML class 上，而是在构建阶段重写 CSS 选择器：
前缀方案不依赖浏览器特性，兼容所有微前端运行时，也绕开了 Shadow DOM 对 DOM 操作的限制——但你要记得，所有子应用的 Tailwind 配置必须完全独立，不能共用一份 tailwind.config.js，否则前缀逻辑会错乱。
