Media queries don't seem to be working in Tailwind 4?

[Ashvith10]

Here's how my global CSS looks like:

@import "tailwindcss";

@theme inline {
  --font-sans: var(--font-space-grotesk);
}

@media (prefers-color-scheme: light) {
  @theme inline {
    --color-background: hsl(0 0% 90%);
    --color-primary: hsl(71 87% 64%);
    --color-display: hsl(0 0% 8%);
    --color-interface: hsl(0 0% 8%);
  }
}

@media (prefers-color-scheme: dark) {
  @theme inline {
    --color-background: hsl(0 0% 10%);
    --color-primary: hsl(71 87% 36%);
    --color-display: hsl(0 0% 92%);
    --color-interface: hsl(0 0% 8%);
  }
}

From my understanding, I should be able to have, for example, a text-interface utility class with variants for the light and dark mode, but this doesn't seem to be the case?

I am not using the dark utility class directive, as this works fine on Tailwind 3 without having the need for it.

[wongjn]

Use regular CSS in media queries. In your case, consider having the light color scheme as the default and then have CSS to override for dark mode. You also don't want inline on those color variables, as their values would be inlined with the inline tag, meaning overriding the CSS variable for dark mode would do nothing.

@import "tailwindcss";

@theme inline {
  --font-sans: var(--font-space-grotesk);
}

@theme {
  --color-background: hsl(0 0% 90%);
  --color-primary: hsl(71 87% 64%);
  --color-display: hsl(0 0% 8%);
  --color-interface: hsl(0 0% 8%);
}

@layer theme {
  @media (prefers-color-scheme: dark) {
    :root {
      --color-background: hsl(0 0% 10%);
      --color-primary: hsl(71 87% 36%);
      --color-display: hsl(0 0% 92%);
      --color-interface: hsl(0 0% 8%);
    }
  }
}

[Ashvith10]

@wongjn Thank you for sharing a working snippet. I am assuming that this code snippet is a correction of what I've shared, so I was wondering if there a "design pattern" or a "right" way to write this in Tailwind 4?

I am still in the phase of starting my own design system, and I wanted to know if this would grow well with the atomic design principle.