[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

[endigo9740]

Hi @adamwathan, this is a really cool technique. Thanks for sharing!

NOTE: I'm happy to create a new issue or discussion for this if needed!

Building on this a bit - can you help me understand why the the CSS custom properties for light-dark() do not update in this example:

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

If you view the CSS file you'll see I've commented one of two blocks. Toggling the comments between the @theme and [data-theme] versions will trigger the issue.

The idea here being that I want to do the following:

1. Abstract the values for light-dark to their own vars
2. Define the base values for these in the original @theme definition
3. Then override these vars base on the active data-theme attribute.

So in practice I can define any color utility class that will have built-in light/dark mode pairings pre-defined, but the color variables themselves are overwritten by the active theme. Each theme representing a different color palette in this case.

I'm assuming the data-theme doesn't take precedence over @theme? If that's the case, is there a better alternative here?

UPDATE

This works, at least in the Playground, but FYI it does appear to break the syntax highlighting:
https://play.tailwindcss.com/kyH4cIqWMN?file=css

Amazing!

[rozsazoltan]

Related:

• How can I safely introduce the use of light-dark() without increasing the minimum browser version requirement?

Required minimum browser versions:

Tailwind CSS v4 (without light-dark())	with light-dark()		with var(--tw-light, ...) var(--tw-dark, ...)
Chrome 111	Chrome 123	(+)	Chrome 111	(=)
Safari 16.4	Safari 17.5	(+)	Safari 16.4	(=)
Firefox 128	Firefox 128	(=)	Firefox 128	(=)

• https://caniuse.com/usage-table

[philipp-spiess]

Responding to the other issue you raised: #16075

I think Adam already explained the technical aspects of your question pretty well but I want to give one additional idea:

Just to explain our use case: we have a large code base and we didn't want to apply the following text-black dark:text-gray-200 everytime we were using text-black. So for some text-* or bg-* colors we override it at the global level by doing this

One alternative that does not require you to patch Tailwind utilities and rely on the order is to use CSS variables for text colors that can adapt automatically to dark mode for you. Something like this: https://play.tailwindcss.com/bqNYWq5bbb