必须关闭preflight并启用prefix：关preflight（coreplugins.preflight: false）使button、h1等回归浏览器默认样式，保障ui库正常渲染；加prefix: 'tw-'隔离工具类名避免与bootstrap等框架冲突；二者缺一不可，且改后须重启开发服务器。
为什么直接用 Tailwind 默认配置在微前端里必出样式冲突
因为 Tailwind 的工具类（如 flex、text-center）全局生效，且 @tailwind base（即 preflight）会无条件重置 button、h1 等原生标签样式。微前端子应用一旦加载，这些规则立刻污染主应用或其他子应用——比如 Element Plus 按钮变透明、Ant Design 输入框边框消失，根本不是类名写错了，而是 button { background-color: transparent } 这条规则早就跑在最前面了。
更麻烦的是：preflight 规则不依赖类名，所以 prefix 和 important: true 对它完全无效；Shadow DOM 虽能隔离，但子应用若调用 document.body.appendChild 就直接逃逸；CSS Modules 只管自己模块，拦不住第三方库往 document.head 插 <style></style>。
必须关掉 preflight 才能让 UI 库正常渲染
所有“按钮没背景”“标题字号被压小”的问题，根子都在 Tailwind 的预设重置层。不处理它，其他隔离手段全是隔靴搔痒。
- 在
tailwind.config.js或tailwind.config.ts中显式关闭：corePlugins: { preflight: false } - 关掉后浏览器默认样式回归，UI 库（如 Naive UI、Element Plus）才能基于原生
button行为正确渲染 - 若需保留部分基础重置（如
box-sizing: border-box），可手动补进@layer base，例如：@layer base { *, ::before, ::after { box-sizing: border-box; } } - 注意：改完配置后，Vite/Webpack dev server 通常不会自动重载 CSS，必须手动重启，否则新配置不生效
加 prefix: 'tw-' 是隔离工具类的最低成本方案
这是防止 flex 和 Bootstrap 的 .d-flex、container 和 Ant Design 的 .ant-layout 类名撞车的最直接方式——从字符串层面切断同名冲突。
- 配置必须是
prefix: 'tw-'（结尾带短横线），写成'tw'会生成非法类名如twtext-lg，样式不生效 - HTML/JSX 中所有 Tailwind 类必须同步更新：
class="tw-flex tw-p-4 tw-text-blue-600"，漏一处就丢样式 -
@apply生成的类、自定义 CSS、第三方组件类（如el-button）不受影响，它们仍走原有逻辑 - 第三方插件（如
tailwindcss-animate）不一定支持前缀，需查文档确认是否兼容
微前端中真正起效的组合动作
单靠 prefix 或关 preflight 都撑不住真实场景。子应用可能动态插入 <style></style>、用 CSS-in-JS、或通过 @import 嵌套加载样式——这些都会绕过编译时控制。
- 主应用统一禁用 preflight，并提供轻量级基础重置（如
button { appearance: none }），把样式控制权交还给浏览器和子应用 - 子应用构建时强制启用
prefix: 'tw-'，并配合twMerge处理动态类合并（如className={twMerge('tw-p-2', isBig && 'tw-p-6')}） - 运行时沙箱（如 qiankun 的
strictStyleIsolation）必须开启，但它只劫持标准 DOM 插入路径；对document.write、CSS-in-JS、@import嵌套等仍需额外拦截 - 最易被忽略的一点：所有子应用的字体、动画定义（
@font-face、@keyframes）若未显式注入到 Shadow Root 或 scoped 容器内，依然会泄漏并干扰主应用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
