Style Label When Radio Button is Checked in Tailwind

 

This is a problem I solved before but somehow forgot how to, so I’m documenting this here:

Here are the steps to achieve this:

1. First make sure the input field comes first before the label because the logic is to make use of the next sibling selector.
2. Then hide the input field but before then, make sure the label is linked to the input using htmlFor.
3. The individual labels and input should be grouped in its own parent div.
4. Then use `input[type=”radio”]:checked + label`  and style.
5. If it is Tailwind, add a class of `peer` to the input field
6. Then on the label, use `peer-checked:styling`

And that’s that.

Hopefully this helps someone someday.