Tailwind配置darkMode:class后，html标签dark类不生效问题

你配置了important: "#app"，这会让Tailwind给所有工具类样式加上#app前缀，包括深色模式的工具类。

当darkMode: "class"时，Tailwind默认生成的深色模式样式选择器是.dark .text-grey-700，加上#app前缀后就变成了#app .dark .text-grey-700。但你把dark类加在了html元素上（documentElement），而#app是html的子元素，这个选择器根本匹配不到实际DOM结构（实际结构是<html class="dark"><div id="app">...</div></html>），所以深色模式样式完全不生效。

而移除darkMode: "class"后，Tailwind使用系统偏好的媒体查询（@media (prefers-color-scheme: dark)），此时important: "#app"只会把媒体查询里的样式也加上#app前缀，选择器变成@media (prefers-color-scheme: dark) { #app .text-grey-700 { ... } }，能正常匹配结构，所以样式生效。

有两种可行的解决办法，根据你的需求选择：

方法1：把dark类加到#app元素上 #

修改添加/移除dark类的代码，将目标元素从documentElement换成#app：

const appEl = document.getElementById('app');
darkMode ? appEl.classList.add('dark') : appEl.classList.remove('dark');

这样DOM结构变成<div id="app" class="dark">...</div>，Tailwind生成的#app .dark .text-grey-700会正确匹配#app.dark .text-grey-700，深色模式样式就能正常生效。

方法2：自定义深色模式的选择器 #

如果你必须把dark类留在html元素上，可以在Tailwind配置里自定义深色模式的选择器，适配.dark #app的结构：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  // 自定义dark模式选择器，匹配html上的dark类 + #app元素
  darkMode: ['class', '.dark #app'],
  important: "#app",
  theme: {
    colors: {
      ...
    },
    fontFamily: {
      ...
    },
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false,
  },
};

这样Tailwind生成的深色模式样式选择器会变成.dark #app .text-grey-700，刚好匹配你的DOM结构，样式就能正常切换。

额外建议 #

如果不是必须使用important: "#app"，建议直接移除这个配置——它会增加样式权重，可能引发其他样式冲突，只有在项目有第三方样式强制覆盖Tailwind样式时才需要启用。

内容的提问来源于stack exchange，提问作者rn-3841603