Problem with dark mode because Tailwind v4 loads two CSS versions in dev mode

[fabian-hiller]

What version of Tailwind CSS are you using?

For example: v4.1.11

What build tool (or framework if it abstracts the build tool) are you using?

For example: Vite v5.4.14 and @tailwindcss/vite v4.1.11

What version of Node.js are you using?

For example: v22.12.0

What browser are you using?

For example: Brave

What operating system are you using?

For example: macOS

Reproduction URL

I am not able to reproduce it in a minimal demo, but still hope this issue provides some value. The issue occurred after migrating the Valibot docs in this PR to Tailwind v4.

Describe your issue

I am using @custom-variant dark (&:where(.dark, .dark *)) to overwrite the default prefers-color-scheme behavior, but Tailwind loads inconsistent CSS code in dev mode. It loads an index.css file from the Tailwind node_modules folder, as well as my own custom root.css file, which includes @import 'tailwindcss'. My CSS file includes the correct dark mode declarations, but the index.css file does not, which mixes up the declarations if you choose a color mode that is not the current prefers-color-scheme.

So I ended up with two versions of Tailwind v4.1.11, each with CSS declarations that contradict each other.

I have already tried various methods of debugging and fixing it, but with no success.

[philipp-spiess]

@fabian-hiller Hey! Yeah this is strange, I briefly checked out the project you linked and it's not immediately clear to me where these other css files are loaded into Vite. My hunch is that it's got something to do with the qwik setup. Have you tried creating a repro with qwik?

The way our Vite plugin works is that it just transforms the CSS files, it doesn't add them as dependencies into your build directly (that happens via your import "root.css") so I'm not sure where this input is coming from either.

[thecrypticace]

I have a RR7 project that has duplicate <style> blocks so I'll see if I can track down what's breaking with that one — assuming things are related.

[fabian-hiller]

Yes, I tried to create a minimal reproduction with Qwik. However, I could not reproduce the issue. I also experimented with enabling and disabling Tailwind. Importing the CSS file into the app with the command @import 'tailwind'; makes Tailwind available, but I could not figure out why it loads the base Tailwind CSS file from the node_modules folder in addition to the JIT compiled version.

I will run some more tests in the next few days and report back if I find anything. Unfortunately, this is preventing us from migrating our docs to Tailwind v4. 🥲

[sanchitkhthpalia]

Hi! 👋

I created a minimal reproduction repo to help debug this issue:
👉 https://github.com/sanchitkhthpalia/tailwind-v4-darkmode-repro

It uses:

• Tailwind CSS v4.1.11
• Vite (vanilla template)

In dev mode, you can see what CSS files are loaded.
This might help check if the duplicate CSS issue only happens with Qwik, or also in a plain Vite setup.

Hope this helps! 🚀