🔗 Sibling Selectors in TailwindCSS

Sibling selectors in @tailwindcss JIT: such a small section in the docs, yet so powerful 💜

https://tailwindcss.com/docs/just-in-time-mode#sibling-selector-variants

You can use this eg. to create beautiful toggle buttons powered by hidden radio inputs.

<label>
    <input type="radio" class="peer hidden" name="payment-method">
    <div class="opacity-50 peer-checked:opacity-100">Visa</div>
</label>

<label>
    <input type="radio" class="peer hidden" name="payment-method">
    <div class="opacity-50 peer-checked:opacity-100">Mastercard</div>
</label>