Support specific variant for checking for the existence of peer

[joshdavenport]

Something like peer-exists which can apply styles when the element given peer exists in the DOM as the previous sibling, i.e. the styles don't apply if it doesn't. Right now you can do this by passing an empty arbitrary selector, .e.g peer-[]:text-red-600 (https://play.tailwindcss.com/3ksDfRPQL5) but it looks a bit weird and definitely doesn't intuitively communicate what is happening unless you have a good understanding of both the peer feature and the arbitrary selector feature.

peer-[]:text-red-600 generates this, and this does work for checking for the existence of peer:

.peer ~ .peer-\[\]\:text-red-600 {
    /* Styles */
}

peer-exists would simply generate:

.peer ~ .peer-exists:text-red-600 {
    /* Styles */
}

I think this would be particularly useful for styling something that renders conditionally as a peer. This kind of conditional rending of DOM elements happens a lot in React at least.

[joaopedrodcf]

Wow thank you so much for this I really would love to have a peer-exists as his way more clear what it really does 🥇

[joshdavenport]

Totally forgot I even posted this in April last year and went through the same process of trying to work out the best way to use peer to just check for existence for the peer, only to stumble on my own post 😆