tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

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

Open TastyPi opened this issue 1 year ago • 0 comments

What version of Tailwind CSS are you using?


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?


What browser are you using?


What operating system are you using?


Reproduction URL


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

TastyPi avatar Aug 09 '22 20:08 TastyPi