Upgrading v3 custom classes to v4 not working when using screen breakpoints

[richardshephard1]

We're in the process of moving from v3 to v4, and we've hit a stumbling block that our custom typography classes are not working when used with a screen breakpoint. We're using NextJS 15 and tailwind 4.0.12.

An example of the implementation:

<h1 className="mobile-heading-big-bold xl:desktop-heading-small-bold xl:pb-10">...</h1>

In devtools, .mobile-heading-big-bold is correct, but xl:desktop-heading-small-bold never appears, but xl:pb-10 does.

In v3, we had:

@layer base {
  .mobile-heading-big-bold {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 2.75rem;
    letter-spacing: -0.02em;
  }
}

This worked fine, but now if v4, as soon as xl is placed on the class, the class is not generated. We have also tried to use @layer component and @utility - neither have resulted in success.

Is there a way of getting custom classes to generate with media queries?

[wongjn]

Yep! Use @utility:

@utility desktop-heading-small-bold {
  …
}

https://play.tailwindcss.com/Y7c46z7J0y?size=1290x720&file=css

[richardshephard1]

Thanks @wongjn

As it turns out, we had an import in the wrong place. There's ordering of imports that affects it, and we ended with an @utility before a @import. This cause some styles to work others not.

We've corrected the import, now seems to be working consistently. Thanks for the confirmation on the usage 👍