Tailwind dark mode类无法作用于body标签的问题求助

你的问题出在Tailwind默认的dark模式选择器逻辑上：当你在body的样式里写dark:bg-black-300时，Tailwind生成的选择器是.dark body——这个选择器会匹配父元素带有dark类的body标签，但你是直接给body加了dark类，所以这个选择器根本匹配不到你的body元素。

下面是两种简单的解决方法：

方法一：直接针对body.dark写样式 #

不用依赖dark:前缀，直接给带有dark类的body单独写样式：

@layer components {
  body {
    @apply bg-white;
  }
  body.dark {
    @apply bg-black-300;
  }
}

方法二：把dark类移到html标签上 #

如果想继续用dark:前缀的写法，把dark类从body移到它的父元素html上：

<html class="dark">
  <body>...</body>
</html>

这样原来的.dark body选择器就能匹配到body，你原本写的代码就会正常生效。

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