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

Question

I have a radio input with a label like below. input is hidden and label is used to make a visually appealing circle on which 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 user clicked on the label input get 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 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?

Answer 1

Here's a complex variant I wrote for this purpose (tested with tailwindcss 2.0.1)

// tailwind.config.js

const plugin = require("tailwindcss/plugin");

const focusedSiblingPlugin = plugin(function ({ addVariant, e }) {
  addVariant("focused-sibling", ({ container }) => {
    container.walkRules((rule) => {
      rule.selector = `:focus + .focused-sibling\\:${rule.selector.slice(1)}`;
    });
  });
});

module.exports = {
  // ...
  plugins: [focusedSiblingPlugin],
  variants: {
    extend: {
      backgroundColor: ["focused-sibling"],
    },
  },
};

Answer 2

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