CSS rules of the form `.foo.bar` don't behave as expected with `peer-checked:bar`

[TastyPi]

What version of Tailwind CSS are you using?

v3.1.8

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

postcss-cli 10.0.0

What version of Node.js are you using?

v16.14.0

What browser are you using?

N/A

What operating system are you using?

Linux

Reproduction URL

https://play.tailwindcss.com/4zvuUG5xci

Seems Tailwind Play is still on v3.1.5, but I see the issue in v3.1.8

Describe your issue

If I have a standard CSS rule defined like this:

@layer components {
  .foo.bar {
    background-color: green;
  }
}

Then I would expect peer-checked:bar to define the following:

.peer:checked ~ .foo.peer-checked\:bar {
  background-color: green;
}

Instead it generates:

.foo.peer:checked ~ .peer-checked\:bar {
  background-color: green;
}

.foo is applied to the .peer instead of the .peer-checked\:bar.

Changing the original rule to .bar.foo fixes the issue (i.e. it works as expected with the first class in the list).