[v4] @apply doesn't seem to work even with raw tailwindcss executable

[redbeard]

@apply seems to be completely broken in tailwindcss v4.

I've read all other discussions around it putting blame on lack of @reference links, however even in a single css file, without any references required, it appears to be broken. I've boiled it down to the most basic code I could, and I parse it with the tailwindcss executive directly.

@import "tailwindcss";

.base-style {
  @apply mx-4;
}

.augmented-style { 
  @apply base-style mx-8;
}

(save as bug.css)

Executing:
npx @tailwindcss/cli -i app/assets/tailwind/bug.css
(tailwindcss 4.0.13)

Outputs:
Error: Cannot apply unknown utility class: base-style

I've tried this with and without the @layer utilities directive.

Is @apply broken or am I doing something that is wrong in v4? This would have worked perfectly in v3. Please don't tell me not to use @apply, the existing codebase I've been forced to upgrade is littered with it.

[wongjn]

You're doing something that is wrong in v4.

You need to "register" the class name into Tailwind using the @utility directive like:

 @import "tailwindcss";

-.base-style {
+@utility base-style {
   @apply mx-4;
 }

 .augmented-style { 
   @apply base-style mx-8;
 }

[redbeard]

Legend, thank you. This drove me batty... I'll need to contribute a section to the upgrade guide because it is not very evident.