[v4] dark variant doesn't apply style properly in some cases

[kefranabg]

What version of Tailwind CSS are you using?

v4.0.1

What version of Node.js are you using?

v22.1

What browser are you using?

All major browsers

What operating system are you using?

macOS

Reproduction URL

Bug reproduction (v4.0.1): https://play.tailwindcss.com/qtyHMLpV36

Expected (v3.4.17): https://play.tailwindcss.com/0TVYfNUrcC

Describe your issue

Previously in v3.4.17, we were able to force a style in dark mode with dark: for a tailwind class that was overloaded in base css file.

You can easily see the issue with the reproduction links (Make sure you've dark mode enabled): with the v4.0.1 play link the text appears yellow, but should be blue because of the dark:text-blue-900 as you can seen on the v3.4.17 play link. But it's displayed in yellow because of the following in css file:

@media (prefers-color-scheme: dark) {
  .text-black {
    color: yellow;
  }
}

Both css and html are similar in the 2 versions.

[adamwathan]

Hey! This is a side-effect of us using native cascade layers in v4. Styles that are not in layers will always take precedence over styles that are, and since your custom styles are not in a layer they always win.

The fix is to make sure your custom styles are also in a layer, here's a working demo:

https://play.tailwindcss.com/YvhTxiMbhN?file=css

Hope that helps 👍

[kefranabg]

Hey @adamwathan thanks for your help.

Actually I don't think it really fixes my issue.

I reused your example and added this line in the html <div class="text-black">This should be YELLOW</div>. Here I would expected This should be YELLOW to be yellow in dark mode but it's not

Reproduction link: https://play.tailwindcss.com/Xc5ztcSDI5

And that's because text-black is a more priority layer: utilities

[adamwathan]

I think I understand the goal here — this is how I would achieve it if I'm understanding correctly:

https://play.tailwindcss.com/z1o4IATpvQ?file=css

Another option is to use the light-dark function if the browser support is sufficient for you:

https://play.tailwindcss.com/hWCBaBZ9jh?file=css