[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.

[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.

[mortscode]

@philipp-spiess The ampersand is standard in modern browsers, correct? https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector

This is a bummer for anyone taught BEM. I have a lot of re-factoring to do on this project. Yikes.

[philipp-spiess]

@mortscode ampersand is standard, correct, but the &-primary syntax to concatenate class names is not. If you rely on this, you can just continue to use postcss-nested though!

[YakshTechs]

✅ The Fixes

✅ Option 1: Flatten the Nesting

The cleanest fix is: don’t nest when you’re using Tailwind classes + @apply. Write it out like this:

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

@apply bg-blue-500 text-white;

}

This way, Tailwind clearly sees the .btn-primary class, and it won’t get purged. ✂️

---

✅ Option 2: Safelist It (if you really wanna nest)

If you must use nesting (&-primary) and can’t flatten your code, you need to safelist the generated class manually in tailwind.config.js:

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,html}'],
  safelist: [
    'btn-primary',
  ],
}

But honestly, this is annoying and fragile if you’re gonna do it for 20+ nested classes.

---

🛠️ Extra: If you're using postcss-nesting

Make sure your postcss.config.js has this in the correct order:

module.exports = {
  plugins: {
    'postcss-nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

Also ensure that you’re using PostCSS nesting plugin, not postcss-nested, because that’s deprecated and behaves differently.