Tailwind v4 @apply unknown utility class error — custom classes used before defined

[omarGhoche710]

Problem:

In Tailwind v4, CSS is processed top to bottom in a single pass. If a custom utility class is used with @apply before it's defined in the file, the compiler throws an error. This is different from v3 which used a multi-pass system and didn't care about order.

I'm trying fix that by order them, but it still throw an error...

For example:

@layer utilities {
     .p-16-regular {
    @apply font-normal text-[16px] leading-[140%];
  }
       .wrapper {
    @apply max-w-5xl mx-auto px-5 md:px-10 w-full text-dark-400 p-16-regular;
  }
}

Error:

Cannot apply unknown utility class p-16-regular

[RobinMalfait]

The single pass is not the problem here. The issue is that you can only apply utilities defined with @utility.

If you update your CSS file with that instead, then it will work.

More info: https://tailwindcss.com/docs/upgrade-guide#adding-custom-utilities

[chrisjcthomas]

In Tailwind CSS v4 (which is CSS-first), @apply only works with utility classes that have been officially registered in Tailwind's utility pipeline.

When you define a custom class using standard CSS layer nesting inside @layer utilities, the oxide compiler does not scan and register it into the utility pipeline for @apply to recognize.

To fix this, you should use the new @utility directive instead of @layer utilities. This registers the class properly:

@utility p-16-regular {
  @apply font-normal text-[16px] leading-[140%];
}

@utility wrapper {
  @apply max-w-5xl mx-auto px-5 md:px-10 w-full text-dark-400 p-16-regular;
}

This ensures the Tailwind compiler registers .p-16-regular as an active utility, allowing it to be correctly referenced by @apply inside @utility wrapper.