[v4] Theming not working in Vite dev mode

[Kulsgam]

Tailwind doesn't seem to compile the background colors when the system theme is used. The color itself is present, but not attached to the dark class:

If I explicitly set the theme as dark in the HTML, then another class is added, along with the incomplete class:

This issue isn't present when the project is built, and only present when dev mode is run

Reproducible example - https://codesandbox.io/p/github/Kulsgam/repro_ex/main?import=true
If the system theme is dark, then it should be yellow, but it remains red.

[wongjn]

You have overridden the default dark variant in src/index.css:

@custom-variant dark (&:is(.dark *));

If you want dark: to respond to the OS theme, remove the aforementioned line.

You may then wish to also rework the .dark rule in src/index.css to be:

-.dark {
+@media (prefers-color-scheme: dark) {
+  :root {
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   …
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
+  }
 }