🔗 Sibling Selectors in TailwindCSS

css frontend html reading-list

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>

continue reading on twitter.com

⚠️ This post links to an external website. ⚠️

If this post was enjoyable or useful for you, please share it! If you have comments, questions, or feedback, you can email my personal email. To get new posts, subscribe use the RSS feed.