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

[david-buck]

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]

Hey! Can you provide an actual reproduction repository I can test locally so I can more easily troubleshoot?

[david-buck]

I tried to create a clean example but in either case (Normal or JIT) I get a warning like this.

The dark:bg-gray-800 class does not exist,... on all dark: classes in the @apply

Which is a shame as this works fine in my existing project.

[adamwathan]

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

[david-buck]

It doesn't make any difference, but if this operator error in some other way, I'll live with that.

[alizahid]

I have the same issue. I've created a reproduction: https://github.com/alizahid/tailwind-jit-dark-bug

In production (Next.js app): https://pickle.sh

Also something to note, while I was creating the repo, it worked as intended once, and then on restart, it broke again. Tried deleting .next but that had no effect.

[adamwathan]

@alizahid thanks for the reproduction! It looks like if I change scss to css it works, but I really can't for the life of me trace it down to something simple.

Another thing that fixes it is using a single CSS file instead of important tailwindcss/tailwind.css and globals.scss separately:

// globals.scss
// fonts

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

// global

::selection {
  @apply bg-emerald-100 dark:bg-emerald-900 text-black dark:text-white;
}

body {
  @apply cursor-default antialiased bg-white dark:bg-black text-black dark:text-white;
}

a {
  @apply transition-colors text-emerald-600 dark:text-emerald-500 hover:text-emerald-500 dark:hover:text-emerald-400;
}

Honestly at a loss here, really can't boil this down to a small reproduction.

@david-buck can you provide a reproduction for your original issue so I have something to compare it to?

[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:

Screen.Recording.2021-03-17.at.4.36.34.PM.mov

[alizahid]

@adamwathan Both solutions only work intermittently for me.

If you'd like a bigger project to reproduce this with, try this: https://github.com/willa/willa

[ChadMoran]

I migrated an existing Rails 6 app to Webpacker 6 and am noticing this same behavior with SCSS. Anything declared in a body CSS selector was getting removed. If I put text-gray-800 dark:text-gray-200 on the body element's class it was working. But not with...

body {
  @apply text-gray-800 dark:text-gray-200;
}

[kevnk]

I fixed SCSS issues with moving my postcss configuration out of webpack and into postcss.config.js.

The other thing that's been tripping me up on one of my projects is that there must be a recent update where you need to be explicit for dark values. For example bg-white bg-opacity-50 dark:bg-blue-500 used to make the dark background also have 50% opacity... but now I need to be explicit: bg-white bg-opacity-50 dark:bg-blue-500 dark:bg-opacity-50. The old version was intuitive to me because of the nature of native css fallbacks, but the new explicit method makes perfect sense for a utility-based css framework.

All is good now (at least in my case)!

[alizahid]

I've noticed another behavior; if I have any colors defined in tailwind.config.js and I change them (change values, add, remove), the changes aren't reflected in styles defined in my .scss files but work in my React components. I need to restart Next.js server for my stylesheets to update.

[bradlc]

This issue is a bit dated now that JIT mode has been added to tailwindcss. I have taken a look at your reproduction @alizahid and the issue seems to be resolved when using tailwindcss with JIT mode enabled, instead of the old @tailwindcss/jit module.

For anyone having a similar issue, make sure you aren't using the @tailwindcss/jit module. If you are still having issues after that please open a new issue with a reproduction, thanks!