[v4] utility class is not generated when also applied to body

[e-krebs]

What version of Tailwind CSS are you using?

v4.0.0-beta.8

What build tool (or framework if it abstracts the build tool) are you using?

Vite, but it is also reproducible in playground

What version of Node.js are you using?

22.12.0 (not sure about playground)

What browser are you using?

Chrome

What operating system are you using?

Windows 11

Reproduction URL

https://play.tailwindcss.com/uDAJ3VP1OF

Describe your issue

• in the v4 css config, create a @utility that generate some class

  • in the playground link above: @utility bg-th { @apply bg-red-500; }

• in the v4 css config, apply this @utility to the body

  • in the playground link above: @layer base { body { @apply bg-th; } }

• in your html, use that same @utility class

  • in the playground link above: <div class="bg-th">

• the red-500 color is correctly applied to the body

• but the same red-500 is not applied to the div with bg-th class (in the playground link above it inherits its background color from its parent instead)

Without having a look at the codebase, I suspect this happens because when the bg-th utility is "applied" to the body it is also removed from the list of available classes, regardless of the fact that it is used at other places.
This is based on the fact that commenting the @apply bg-th line in the playground link above results in the bg-th class being correctly generated.

[maxdzin]

For now, it seems @utility should be defined before the @base like this:

@import "tailwindcss";

@utility bg-th {
  @apply bg-red-500;
}

@layer base {
  body {
    @apply bg-th;
  }
}

Then it works as expected.

[e-krebs]

ha, indeed.
the migration tool should probably reorder them in that order, then