Search code examples
tailwind-css

Tailwind CSS : Is there a way to target next sibling?

I have a radio input with a label like the one below. Input is hidden and a label is used to make a visually appealing circle on which the user can click.

<input id="choice-yes" type="radio" class="opacity-0 w-0 fixed"/>
<label for="choice-yes" class="transition  duration-500 bg-blue-300 hover:bg-blue-500 w-20 h-20 rounded-full mr-5 flex items-center align-middle justify-center">Yes</label>

When the user clicks on the label input gets checked. I'm trying to figure out how to target that, so I could give the label a different style.

This can be achieved in pure CSS using the next sibling selector.

input[type="radio"]:checked + label {
  background-color: #bfb !important;
  border-color: #4c4 !important;
}

Is there something similar in tailwind.css that I could use instead?

Solution

  • For those looking to implement this, since introduction of just-in-time mode (Tailwind CSS v2.1+) sibling selector variant is available.