Tailwind dark mode class not affecting body tag-CodePudding

My body tag has "dark" class, all the component that has dark tag e.g "dark:bg-black-300" working properly on other class/id/tag except the body tag, i want to add dark to the body tag. How do i do that? here is my code

<body >...</body>

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

The "dark:bg-black-300" is not affecting

CodePudding user response：

I had the same problem last week and I resolved it toggling dark mode manually and adding the class dark inside the html tag instead of body tag and that should be work. After that you could control the toggling throught React js.

https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually

<!DOCTYPE html>
<html lang="en" >
 <head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title >Example</title>
 </head>
 <body >
  <div id="root" ></div>
  <script type="module" src="/src/main.jsx"></script>
 </body>
</html>