peer-focus:peer-valid:* generates wrong output

[kripod]

What version of Tailwind CSS are you using?

v2.2.2

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

Next.js 11.0.0

What version of Node.js are you using?

v14.16.1

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction repository

https://github.com/kripod/next-starter-strict/blob/main/src/components/inputs/Input.tsx

Describe your issue

While trying to apply peer-focus:peer-valid:border-blue-500 to avoid a precedence clash with peer-invalid:border-red-500, it turns out that the former generates the following input, which is invalid:

.peer:focus:valid ~  ~ .peer-focus\:peer-valid\:border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgba(59, 130, 246, var(--tw-border-opacity));
}

Tailwind should generate something like below instead, making peer-* utilities composable:

.peer:focus:valid ~ .peer-focus\:peer-valid\:border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgba(59, 130, 246, var(--tw-border-opacity));
}

[adamwathan]

Ah good catch! Will try and take a look at this this week, PR welcome if anyone wants to try before I (or @RobinMalfait 👀) have time.

[RobinMalfait]

Thanks for the bug report, but I think you might have a caching issue. This has already been fixed in v2.2.2. When I clone the repo I see this as a result:

Some steps you can try to fix this:

• Remove the .next folder & restart the dev project
• rm -rf node_modules && npm install

Can you verify that this works for you?

[kripod]

@RobinMalfait I did all the steps you’ve suggested and it turns out that the issue only persists in development (next dev) – production builds are working fine (next build && next start).

[RobinMalfait]

@kripod thank you for testing things out. I can reproduce this issue in tests now, will report back here once I have a fix.