[v4] The generated class is not valid

[rodnye]

Tailwind version: v4.0.9.
Browser: Firefox v115.0.2

I was starting a new project with Vite and Tailwind when this happened on the first run:

The blue warning box says: Invalid property name.
Therefore, the attribute md:hidden is not used as it indicates that the nesting of the @media line is not valid.

What can I do to resolve it? Is it a compatibility issue with the browser?

[wongjn]

It is a compatibility issue with the browser. That is CSS nesting syntax which according to Can I Use, is only supported in Firefox 117+. Furthermore, as per the documentation, Tailwind only supports Firefox 128+.

[rodnye]

Thanks, mate! I guess it's time to update the browser.
I switched PCs, and I was curious about that issue since the last time I used Tailwind, it didn't use that syntax for media queries