[v4] generated css for dark variant looks wrong compared to 3.4

[kefranabg]

What version of Tailwind CSS are you using?

For example: v4.0.1

What version of Node.js are you using?

For example: v22.1

What browser are you using?

All major browsers

What operating system are you using?

macOS

Reproduction URL

Bug reproduction link: https://play.tailwindcss.com/oTvhvobEoO?file=css

Describe your issue

Following up on #16068

Sorry I think my last issue was not explicit enough.
I posted a new reproduction link to demonstrate the issue: https://play.tailwindcss.com/oTvhvobEoO?file=css

I think there is an issue with the generated css order:

But I believe the order should be this one:

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

I compared with v3.4.17 and the order was the above, so I guess this is a regression right?

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:

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

But still in some cases we'd like to have the option to override it with another color (e.g text-black dark:text-blue)

The options you suggested here are not really what we expect since it will affect global colors

Let me know if I can clarify more 👍

[philipp-spiess]

Hey! I understand that you're frustrated with this change but as @adamwathan mentioned in the discussion (#16070), this is an expected side-effect of Tailwind CSS 4 moving to layers. I'm going to close this issue and respond on the GitHub discussion with some more detail.