[v4] unable style &:before with dark: modifier

[dimaMachina]

Hi, I am not sure what caused this issue but I am unable to style :before pseudo selector with dark: variant

Playground

As you can see generated selector

.nextra-steps {
  h2 {
    &:before {
      --tw-content: 'dada';
      content: var(--tw-content);
      &:where(.dark *) {
        background-color: var(--color-red-500);
      }
    }
  }
  h3 {
    &:where(.dark *) {
      background-color: var(--color-red-500);
    }
  }
}

it styles background for .h3 but not for .h2:before

[wongjn]

I believe it could be because having :where() appended to :before like :before:where() is an invalid selector. A work-around would be to use the before variant in the @apply so that the :where() comes before the :before.

---

As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097

So you could consider using regular CSS.

[dimaMachina]

thank you! this behaviour is explained in #15597 (comment)