Tailwind 的 prefix 不足以实现样式隔离，因为它仅修改生成的工具类名，不约束作用域，无法防止子应用直接使用未加前缀的类、第三方库类名冲突、全局重置样式污染及 dark 变体泄漏，必须结合编译时前缀、运行时容器约束和全局规则显式降权。
不能靠 tailwind.config.js 里加 prefix 或开 content 范围就认为 Tailwind 样式已隔离——它只控制类名生成，不控制作用域，子应用的 text-red-500 仍会全局生效，且与主应用或其他子应用的同名类直接冲突。
为什么 tailwind.config.js 的 prefix 不够用
Tailwind 的 prefix 选项（如 prefix: 'subapp-a-'）仅在构建时给所有生成的工具类加前缀，比如把 text-red-500 变成 subapp-a-text-red-500。但它完全不管：
- 子应用是否在 HTML 中直接写了
class="text-red-500"（绕过 prefix） - 第三方组件库（如 Element Plus）内部使用的原生 Tailwind 类（它们没走你的配置）
- 主应用或其它子应用也用了相同 prefix，导致权重相同、后加载者胜出
-
@layer base里重置的html、body、button等全局样式，依然污染整个页面
必须配合运行时容器约束才能真正隔离
即使你已启用 prefix，若子应用的 DOM 没被限定在独立作用域内，样式仍会泄漏。关键动作是：
- 确保子应用根节点挂载到一个带唯一属性的容器中，例如：
<div id="subapp-order" data-app="order"></div> - 在主应用中，对子应用注入的所有
<style></style>标签做运行时重写：遍历每条 CSS 规则，把选择器改写为[data-app="order"] .subapp-a-text-red-500这类高权重形式 - 禁用子应用执行
document.head.appendChild，拦截其动态插入的<style></style>并重定向注入到该容器内 - 特别注意
@layer base和@layer components：它们生成的规则默认无选择器前缀，必须手动包裹，例如：[data-app="order"] { @layer base { html { font-size: 16px; } } }
Vite + Tailwind 子应用的实操要点
Vite 构建的子应用对 qiankun 的 strictStyleIsolation 基本无效，因为 Tailwind CSS 是通过 import './index.css' 加载，最终由 Vite 插件注入 <style></style> 到 ，qiankun 劫持不到。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 在
vite.config.ts中关闭build.cssCodeSplit: false，确保所有 Tailwind 类打包进单个style块，便于后续统一重写 - 移除所有
<link rel="stylesheet">，改用 JS 动态加载并注入到容器内：container.appendChild(styleEl) - 使用
postcss-prefix-selector插件，在 PostCSS 阶段对整个index.css内容加容器前缀，不只是类名：plugins: [require('postcss-prefix-selector')({ prefix: '[data-app="order"] ' })] - 禁止子应用使用
!important—— 它会绕过容器前缀的权重优势
容易被忽略的 Tailwind 特殊场景
这些地方 Tailwind 默认不加前缀，但恰恰最易引发污染：
-
@layer utilities以外的自定义@apply：如果在index.css里写了.btn-primary { @apply bg-blue-500 text-white; }，这个.btn-primary不受prefix控制，必须手动加前缀或改用data-app包裹 -
dark:变体生成的规则是全局的：.dark .text-red-500仍会匹配主应用的dark类，应改写为[data-app="order"].dark [data-app="order"] .subapp-a-text-red-500 - 第三方 UI 库（如 PigX UI Pro）若基于 Tailwind 封装，其内部类名不会继承你的
prefix，需从源头配置命名空间，或用prefix+replace正则批量重写其产物 CSS
真正起效的隔离不是“让 Tailwind 少生成点类”，而是确保每个类只在它该生效的容器里起作用——这要求编译时加前缀、运行时加约束、关键全局规则（html/body/button）必须显式降权或重置，三者缺一不可。
