Why doesn't the @theme rule in Tailwind CSS 4.0 work?

[WYZ-R]

I use vite,react to build my project,also Installing Tailwind CSS as a Vite plugin.

This is my app.css
`@import "tailwindcss";

@theme {
--breakpoint-mf: 990px;
}`

I learned that tailwind CSS 4.0 allows direct use of the @theme rule without needing a tailwind.config.js file,but the @theme rule in my project is not taking effect ,i don't know where the issue lies.

[wongjn]

How are you using the mf: variant? It could be that it is getting overridden by other media query variants. Try converting it to rem units instead so that Tailwind orders the rules with respect to other media queries properly.

[wongjn]

Then, consider providing a git repo that reproduces the unexpected behavior.

[WYZ-R]

The repository named "Modern-web-3" in my account is the one with the issue. Are you suggesting that I need to create another repository to see if the same problem occurs?

[wongjn]

You can do that if you want as a troubleshooting step. You might be able to discern the misconfiguration that way that is causing it not to work. Otherwise, I'll have a look at that repo, thank you.

[WYZ-R]

Yes, thank you very much for your suggestion：）

[WYZ-R]

I regenerated a project and found that the issue with MF can be resolved in this new project. Thank you for your suggestion. I will look into what went wrong when I have time ：)