TailwindCSS深色模式：自定义dark类挂载父节点的实现方法

当然可以指定其他标签来挂载dark类，完全不需要修改宿主网站的html标签，具体操作如下：

• 修改Tailwind配置文件
  在tailwind.config.js中，将darkMode设置为包含自定义选择器的配置项，比如指定你的Widget根容器（假设选择器为#widget-root）：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    darkMode: ['class', '#widget-root.dark'],
    // 其他Tailwind配置项...
  }
  

  这里的#widget-root.dark表示：当你的Widget根节点带有dark类时，启用深色模式样式。

• 在Shadow-DOM内管理深色类
  将Widget的根容器（即Shadow-DOM的挂载节点）作为dark类的载体，示例结构如下：

  <!-- Widget根元素（Shadow-DOM宿主节点） -->
  <div id="widget-root" class="dark">
    <!-- Shadow-DOM内部内容 -->
    <div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
      你的Widget内容
    </div>
  </div>
  

  这样深色模式样式只会作用于Widget内部，完全不会影响宿主网站的样式。

• 动态切换明暗模式
  后续需要切换模式时，仅需给Widget根节点添加/移除dark类即可，用JS实现的示例：

  const widgetRoot = document.getElementById('widget-root');
  // 切换深色模式
  widgetRoot.classList.toggle('dark');
  

这种方式通过Tailwind的自定义选择器配置，把深色模式的作用范围严格限制在Widget内部，完美隔离宿主网站的样式环境。

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