Link to the code that reproduces this issue

https://github.com/GabenGar/repros/blob/main/nextjs/css-out-of-order/README.md

To Reproduce

1. Upgrade to NextJs version 14.2.5
2. Build prod
3. Write some CSS inside a .module.css file.
4. See the changes

Current vs. Expected behavior

Tailwind CSS's preflight styles overwrite Tailwind CSS written inside module CSS.

Example:

button.module.css

.button {
 @apply bg-red-500;
}

Expected Behaviour: Button color is red.

Current Behaviour: Button color is transparent since module CSS is overwritten by tailwind's preflight styles.

Provide environment information

Relevant packages:

Next - 14.2.5

Which area(s) are affected? (Select all that apply)

Not sure, create-next-app, Navigation

Which stage(s) are affected? (Select all that apply)

next build (local), Other (Deployed)

Additional context

We have a big legacy project where we have written tailwind classes inside module CSS by using the apply directive. At some places, these styles are being reset by Tailwind's preflight styles. This started happening after the next JS upgrade to version 14.2.5 and we are unable to move further.

I have tried the cssChunking as per the documentation but that is having no effect.

Is there any workaround? Rewriting everything back to tailwind classes is a very bandwidth heavy task for our team.