Peer variants only work if 'peer' element comes before 'peer-{modifer}:' element

[wfischer42]

What version of Tailwind CSS are you using?
v3.0.15

What build tool (or framework if it abstracts the build tool) are you using?
postcss 8.4.5, Next.js 12.0.8

What version of Node.js are you using?

For example: v17.0.1

What browser are you using?
For example: Chrome

What operating system are you using?
macOS

Reproduction URL
https://play.tailwindcss.com/9tkBxIRJOq

Describe your issue
A peer variant seems to only work if the element with the peer class comes before the element with a peer-{modifier}: class. This is problematic element order can't always be easily rearranged to accommodate, particularly if it disrupts the tab-index flow.

[adamwathan]

Hey! Yep this is intentional and is just a limitation of CSS — there are no selectors for targeting an element that comes before something, only after.

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

It's mentioned in the original PR (#4556) but it's not clear in the docs, will add a note there 👍🏻

[boompikachu]

For anyone looking for ways to target "before" sibling, one of the ways is to move all the "before" siblings to be "after" siblings and use flex order to rearrange the element. https://play.tailwindcss.com/Z6En7ZEn4u