Simple peer-checked usage not working after v4

[jhackett1]

I have a "concealed radio button" component in my codebase that looks like:

 <div key={vol} className="relative">
    <input
        type="radio"
        value={vol}
        id={`expected-volumes-${vol}`}
        className="peer absolute opacity-0"
        {...helpers.register("onboardingInfo.expectedVolumes")}
    />
    <label
        className="text-lg block p-2 rounded-sm  bg-grey-200 text-green-800 cursor-pointer peer-checked:bg-green-800 peer-checked:text-white"
        htmlFor={`expected-volumes-${vol}`}
    >
        {vol}
    </label>
</div>

The peer-checked classes are applied 100% of the time, rather than only when the peer input is checked.

This usage seems consistent with the docs, does not seem to be related to the more complex use that was causing a problem in this issue and peer isn't mentioned in this upgrade guide.

Was working as expected before our v4 upgrade.

What am I doing wrong?

[adamwathan]

Hey! Copied your code and it seems to work as expected for me:

https://play.tailwindcss.com/Iqvjjp2vGP

Maybe you can look at this example and get a better understanding of what is different here vs. in your actual project?