You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
wfischer42
changed the title
Peer variants only work if peer comes before in DOM
Peer variants only work if 'peer' element comes before 'peer-{modifer}:' element
Jan 19, 2022
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.
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
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 apeer-{modifier}:
class. This is problematic element order can't always be easily rearranged to accommodate, particularly if it disrupts the tab-index flow.The text was updated successfully, but these errors were encountered: