Media queries not working after migrating to V4

[dmuriel]

Hi, I recently migrated TailwindCSS from V3 to V4, and I'm having some issues with the media queries, probably there's something that I missed during the migration, but I wanted to ask for help because I've dedicated two days without any solution.

Basically, I am working on a big project where we are migrating from Bootstrap to TailwindCSS. I started using v3, but shortly after, v4 came. There's a component that uses a custom class that we apply in the HTML and another custom class based on a media query. This was working in v3, but it does not work anymore in v4.

Example using v3: https://play.tailwindcss.com/S9WW259kYQ?size=1160x720&file=css
Example using v4: https://play.tailwindcss.com/1x9Gso12EH?size=1174x682&file=css

[wongjn]

You need to use @utility to register the class name rules with Tailwind in v4: https://play.tailwindcss.com/4hSlDKp9gg?size=924x682&file=css

[dmuriel]

Yes, this is it. Kinda a bummer that I have to update most of our classes, but this is definitely what I need. Thanks.