What version of Tailwind CSS are you using?

v4.0.0-beta.9

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

Next.js 15.1.4

What version of Node.js are you using?

v22.13.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/mhornbacher/tailwind-repro

Describe your issue

At a high level:

1. The following issue is triggered when adding any peer- class with hot reloading
2. All peer- classes are always active after a build

Parsing css source code failed
  530 |   }
  531 |   .peer-disabled\:text-purple-500 {
> 532 |     :merge(.peer):where([data-rac])[data-disabled] ~ & {
      |             ^
  533 |       color: var(--color-purple-500);
  534 |     }
  535 |     :merge(.peer):where(:not([data-rac])):disabled ~ & {

'merge' is not recognized as a valid pseudo-class. Did you mean '::merge' (pseudo-element) or is this a typo? at [project]/src/app/globals.css:531:12

The cause for this, as far as I can tell is as follows:

In the documentation for plugins there is a special :merge selector designed for plugins (like react-aria-components in this example) to extend the focus, disabled... selectors, in this case to enable them to be triggered in more complex accessibility scenarios. (see the react-aria implementation for example.

However in Tailwind 4.0 it seems that this selector is not handled by the new lighting CSS compiler. I know its not that common, but many projects rely on this to simplify accessibility development for their team. Which is something I know that the tailwind team cares about as well :)