Media queries not working on custom classes (Tailwind 4)

[shadesofcyber]

Hey,
since my development follows a Figma design, I need to define a bunch of custom classes under "@layer" utilities. Unfortunately, when I try to use media queries like sm, md, lg in my jsx, they do not work with my custom classes.

I then tried to define a custom class like this, but that doesn't work either (apparently, the apply rule does not work):
@utility testclass { @apply font-rota text-[20px]... }

How do I make media queries work with custom classes Tailwind 4?

[wongjn]

Your @utility rule seems to work in this Tailwind Play which would suggest it could be something particular to your project. Consider providing a git repo that reproduces the issue if you'd like further assistance.

[shadesofcyber]

For whatever reason, it is working now, but yesterday, it definitely didn't lol. Another thing that confuses me is also the fact that my IDE (VS Code) does not mark and change the font color of @apply whenever it's inside of @utility.

So do you recommend defining all my custom classes as a single utility, just like in the example?

[wongjn]

In the first instance, I'd recommend avoid writing any custom CSS altogether (try to use any abstractions in your templating language instead). Failing that, you could have a @utility declaration per class, but try to avoid @apply. Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097
• https://x.com/adamwathan/status/1890406016291938701

[shadesofcyber]

If I avoid writing custom CSS altogether, how am I going to develop the Figma design then? It has dozens of specific headings, paragraph types, colors that need to be defined via variables, etc.. So it's better and "safer" to manually keep writing all these things for every single div every time instead of pre-defining classes for this? That'd be horrible tbh.

[wongjn]

So it's better and "safer" to manually keep writing all these things for every single div every time instead of pre-defining classes for this?

Better is subjective here, but you could consider using any abstractions in your templating language instead.