微前端中tailwind css必须按子应用隔离：各子应用独立安装、配置tailwind.config.js（content仅限自身路径），禁用全局引入，推荐@layer+where()限定作用域，并确保postcss与构建工具对齐。
微前端中直接共用 Tailwind CSS 很容易导致样式冲突、类名污染或构建产物重复，根本不能靠「全局引入一次就完事」。必须按子应用隔离作用域，且确保 content 扫描范围精确、purge（v3+ 为 content）不越界、CSS 构建流程不互相干扰。
子应用必须独立构建 Tailwind CSS
多个微前端子应用如果共享同一份 tailwind.css 或共用一个 tailwind.config.js，会导致：
- 一个子应用新增的类名，可能被另一个子应用的 Purge 阶段误删（因为
content没限定到本子应用路径） - 不同子应用的
theme.extend.colors冲突，最终生成的 CSS 中颜色变量覆盖混乱 - 热更新时 PostCSS 插件监听错文件，引发构建卡死或样式未刷新
正确做法是每个子应用单独执行：
npm install -D tailwindcss postcss autoprefixer<br>npx tailwindcss init -p
并确保其 tailwind.config.js 的 content 只包含自身源码路径，例如：
content: [<br> "./src/**/*.{ts,tsx,jsx,js}",<br> "./public/**/*.html"<br>]
避免全局 CSS 注入导致样式泄漏
微前端框架（如 qiankun、micro-app）通常通过沙箱或 Shadow DOM 隔离 JS，但对 CSS 默认不做隔离 —— 这正是 Tailwind 容易「破防」的地方。
关键约束：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 禁止在主应用的
index.html中通过<link>引入 Tailwind 样式（会污染所有子应用） - 禁止子应用在
document.head动态插入<style></style>或<link>（沙箱可能拦截失败，或绕过样式作用域） - 必须让子应用的 Tailwind CSS 仅作用于自身容器节点，推荐两种方式：
① 使用 @layer + :where() 限定作用域（Tailwind v3.3+）：
@layer base {<br> :where(.subapp-foo *) {<br> @tailwind base;<br> }<br>}<br>@layer components {<br> :where(.subapp-foo *) {<br> @tailwind components;<br> }<br>}<br>@layer utilities {<br> :where(.subapp-foo *) {<br> @tailwind utilities;<br> }<br>}
② 构建时输出带前缀的 CSS（需自定义 PostCSS 插件或使用 prefixer），但会丧失响应式断点类（如 md:text-lg）的自动适配能力，慎用。
PostCSS 配置必须与微前端构建工具对齐
子应用若用 Vite，需确认 vite-plugin-tailwind 或原生 PostCSS 配置已启用；若用 Webpack，则 postcss-loader 的 plugins 顺序必须为：tailwindcss → autoprefixer，且不能漏掉 postcss.config.js 中的 tailwindcss: {} 声明。
常见错误：
- Vite 子应用里没装
postcss，导致@tailwind指令不解析，终端报错Unknown at rule @tailwind - Webpack 子应用中
postcss-loader被放在css-loader之后，Tailwind 类无法注入 - qiankun 子应用启用
experimentalStyleIsolation: true时，若 Tailwind 输出含@layer，部分老版本 qiankun 会丢弃@layer规则
生产环境务必验证 Purge 效果
微前端场景下，content 配置稍有偏差，就会导致某子应用上线后部分 Tailwind 类名丢失（比如按钮变无样式、响应式失效）。验证方法很简单：
- 本地构建后打开
dist/output.css，搜索一个明确只在该子应用中使用的类（如bg-subapp-foo-primary），确认它存在 - 用浏览器 DevTools 检查运行时元素，看是否命中预期类名，且无其他子应用的类名残留
- 禁用 JS，纯 HTML 打开子应用页面，确认样式仍完整（排除 JS 注入 CSS 的不可靠路径）
最易被忽略的是：子应用打包时若引用了主应用导出的公共 UI 组件（含 Tailwind 类），这些路径必须显式加进该子应用的 content 数组，否则 Purge 会干掉它们 —— 这点和单体应用完全不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
