如何自动实现Tailwind类非全局，避免AngularJS与React样式冲突

方案1：使用Shadow DOM实现完全样式隔离（改动最小，优先推荐） #

直接将React应用挂载到Shadow Root节点中，天然实现内外样式完全隔离，不需要修改任何组件代码、Tailwind配置或构建逻辑。
实现代码示例：

// React 应用入口文件
const reactHost = document.getElementById('react-b-container');
// 给承载B的div创建开放模式的Shadow根
const shadowRoot = reactHost.attachShadow({ mode: 'open' });
// 把React应用渲染到Shadow根内，而不是直接挂载到宿主div
const root = ReactDOM.createRoot(shadowRoot);
root.render(<App />);

特性说明：

• 遗留应用A的所有样式完全无法渗透进Shadow DOM，不会影响Tailwind类的渲染效果
• B的Tailwind样式完全限定在Shadow DOM内部，不会泄露到外部影响A的样式
• 如果需要在B中使用全局字体、公共重置样式等，只需手动把对应的样式标签注入到Shadow Root内部即可，不会影响外部。

方案2：Tailwind父选择器限定（无法使用Shadow DOM时备选） #

如果因为浏览器兼容等特殊原因不能用Shadow DOM，只需修改Tailwind配置即可实现样式隔离，不需要修改任何组件的className：
在tailwind.config.js中添加important配置，指定为B容器的唯一选择器：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 假设承载B的div的id为react-b-container
  important: '#react-b-container',
  // 其余原有配置保持不变
}

配置后所有Tailwind生成的样式规则都会自动带上#react-b-container前缀，优先级高于A的普通类样式，既不会被A的样式覆盖，也不会影响A的元素样式。如果A中存在带!important的冲突样式，可以配合postcss-prefix-selector插件给所有Tailwind输出样式统一加上父选择器前缀即可。

内容的提问来源于stack exchange，提问作者Domi