[v4] upgrade does not work for dark mode variant with media query

[fiws]

What version of Tailwind CSS are you using?

v4.0.3

What version of Node.js are you using?

v23.7.0

What operating system are you using?

Arch Linux

Reproduction URL

https://github.com/fiws/tailwind-issue-f1

Describe your issue

After running npx @tailwindcss/upgrade@next, my "dark" theme config in the old tailwind.config.js was transformed into @custom-variant dark (@media not print { .dark & }); this does not work and appears to be invalid syntax. See below for details:

before

https://github.com/fiws/tailwind-issue-f1/blob/676604340b5ad3ef2384ea86ab79d755a82dfb40/tailwind.config.js#L7

// tailwind.config.js
darkMode: ["variant", "@media not print { .dark & }"],

after

https://github.com/fiws/tailwind-issue-f1/blob/main/src/index.css#L3

@custom-variant dark (@media not print { .dark & });

---

I also have no idea what to correct syntax is..

[wongjn]

At least one correct syntax version is:

@custom-variant dark {
  @media not print {
    .dark & {
      @slot;
    }
  }
}

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

[oleksiimazurenko]

In my Next.js 15 project, the following directive is not working as expected:
@custom-variant dark (&:where(.dark, .dark *));

It fails to override the styles set by the prefers-color-scheme media query.

However, when I apply the dark variant within a utility, everything works as expected:

@utility bg-home { /* dark */ @apply dark:from-blue-400! dark:from-[-40%]! dark:to-[#121212]! dark:to-[20%]!; /* main */ @apply bg-linear-to-b; }

[philipp-spiess]

@oleksiimazurenko Mind sharing a repro of what you mean? Changing the dark variant has nothing to do with prefers-color-scheme. The latter is just using https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme under the hood. You would need to set color-scheme on your html root to ensure it works as expected.

[oleksiimazurenko]

@philipp-spiess Hey, thanks for your response!

I’m not trying to override prefers-color-scheme. My goal is to make Tailwind apply the dark variant only when the .dark class is present on the html element, as described in the documentation: @custom-variant dark (&:where(.dark, .dark *));

However, it doesn’t seem to work in my Next.js 15 project. Instead, the styles from prefers-color-scheme are still taking precedence. But when I apply dark inside a utility, it works correctly.

Am I missing something in my setup, or is there an additional step required to fully override prefers-color-scheme behavior?

[philipp-spiess]

@oleksiimazurenko Do you mind putting together a very small Next.js that reproduces the issue so we can take a look? If I try this in the playground it works as I'd expect it to: https://play.tailwindcss.com/WBl5uP2qE3

[philipp-spiess]

Thanks for the bug report @fiws. Fixed this now in main and it'll be released with the next patch release.

@oleksiimazurenko Since your issue felt unrelated, please put together a reproduction that we can run locally to help you out and create a new issue with that. Thank you!