[v4] Ampersand Alias not working as expected

[moshie]

What version of Tailwind CSS are you using?

@tailwindcss/postcss: "4.0.0-beta.2"
tailwindcss: "4.0.0-beta.2"

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

NextJS: 15.0.3

What version of Node.js are you using?

v20

What browser are you using?

Arc

What operating system are you using?

macOS

Describe your issue

When writing css such as:

.btn {
  @apply px-4 py-2 rounded;

  &-primary {
    @apply bg-blue-500 text-white;
  }
}

Then the .btn-primary class is not generated and present in the css file.

[philipp-spiess]

Hey there! I don't think a .btn-primary class is supposed to be created, e.g. check out this example directly in the browser without any Tailwind post-processing: https://play.tailwindcss.com/FdeyotGGC9?file=css

What you refer to is probably a feature of another CSS pre-processor (maybe SCSS?). If you want this to work, you'll have to ensure that you run the according pre-processors before Tailwind in your postcss config.

In general though, Tailwind v4 uses browser-based CSS nesting and lightningcss to flatten the nesting.

[moshie]

Hey 👋 thanks for getting back to me!

I might be mistaken but didn't this work before with the tailwindcss/nesting postcss plugin which wraps https://github.com/postcss/postcss-nested ?

I guess not implementing this will introduce breaking changes when migrating from v3?

[philipp-spiess]

Hmm, I see. I didn't realize this postcss plugin does non-standard things like this. We should probably update our upgrade tool to fix this, then. Let me bring this up with the team 👍

In your case, if you depend on this behavior, it might be best if you do not remove tailwindcss/nesting from your postcss config yet and still keep using it if you have tons of usages of this pattern and can't migrate right away.

[moshie]

@philipp-spiess Hey any updates?

[philipp-spiess]

@moshie No updates I'm afraid, I recommend migrating away from this non-standards pattern.