Dark mode background color not applying when `body` styles are extracted using @apply

I have this in my globals.css:

body { @apply font-body antialiased max-w-xl mx-auto text-gray-900 bg-white dark:bg-gray-800 dark:text-white transition-colors; }

And it works in the old way, but with JIT, it doesn’t apply the dark:bg-gray-800, while the dark:text-white works fine.

The result is white text on a white background in dark mode.

Background colour changes to other elements apply fine, only body is unaffected.

[adamwathan]

@david-buck For what it’s worth using the code you provided, I get the expected output:

I also cloned down the latest version of your existing reproduction and after fixing the typo in tailwind.conifg.js to tailwind.config.js I get the expected behavior:

https://user-images.githubusercontent.com/4323180/111535037-07e3ef80-873f-11eb-9739-02fe1dbd1cb6.mov

[adamwathan]

You have no darkMode setting in your config file. Set that to “media” or “class” and you should be good to go.