Nested CSS utilities and @apply rules fails

[willans]

What version of Tailwind CSS are you using?

For example: v4.0.9

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

Vite 6.2.0

What version of Node.js are you using?

For example: v22.0.0

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/zVH1cgIGl7

Describe your issue

I'm creating a bunch of utility classes in a project, and I stumbled across a bug in which utility classes are not being generated, if they're also used within some custom components/classes.

Within the example, all of the setups work except Example 2. Within Example 2, no class is being generated for 'type-block-1', despite it being in the markup.

I've narrowed it down to when there's multiple @apply rules within the same block. This also only happens with these newly defined utility classes. If the nested @apply uses a default Tailwind utility (e.g. rotate-45), then the issue doesn't persist. So it doesn't look like it's an issue with the structure of the CSS.

At first I thought this was my own personal setup, but I've managed to recreate within Tailwind Play.

If I'm doing anything glaringly obvious, let me know.

[philipp-spiess]

Oh wow that's a fun one. Looks like somehow the nested usage of @apply swallows the @utility definition. Thanks for the repro, we'll look into it!

[philipp-spiess]

Fixed in main, will be out with the latest patch release. Thank you!

[willans]

Excellent. Thanks for the speedy response and fix @philipp-spiess, appreciated.