3.4.2 contains a breaking change related to @apply

[jagthedrummer]

What version of Tailwind CSS are you using?

v3.4.2

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

postcss 8.4.38

What version of Node.js are you using?

For example: v20.11.1

What browser are you using?

N/A

What operating system are you using?

macOS, Linux

Reproduction URL

https://play.tailwindcss.com/1igX3RZ4zc?size=540x720&file=css

Describe your issue

CSS like this works just fine in version 3.4.1:

.button {
  @apply rounded-md border border-gray-200 px-4 py-2;
  @apply inline-flex items-center whitespace-nowrap;
  &.button-smaller {
    @apply px-3 py-1 text-xs;
  }
}

.test-button {
  @apply button;
}

But starting in 3.4.2 the build step throws this error:

/sourcePath:14:3: The `button` class cannot be used with `@apply` because `@apply`
  does not currently support nested CSS. Rewrite the selector without nesting or
  configure the `tailwindcss/nesting` plugin:
  https://tailwindcss.com/docs/using-with-preprocessors#nesting

The error still happens even with the tailwindcss/nesting plugin configured.

It looks like the new behavior was added here: #13325

It's unexpected for a breaking change like this to come through on a patch level version bump.

Given that tailwindcss/nesting doesn't fix the issue, is there something else we should do to get past the failing build?

[adamwathan]

Can you create a proper reproduction project on GitHub that I can check out? Prior to 3.4.2 we threw this error more often, not less often, so it should have already been giving you an error. I can't reproduce this myself if tailwindcss/nesting is configured which it should be for this to work.

[adamwathan]

Here's a quick project I whipped together where it all seems to work — try running npm run build and it builds without errors and the nesting is processed:

https://github.com/adamwathan/issue-13433

[jagthedrummer]

Woops, my bad. In checking our config I had spotted postcss-nested and mistook that for tailwindcss/nesting. Getting the right plugin activated did the trick. Sorry for the trouble!