title: TailwindCSS - Change Label When Radio Button Checked
body: <p>I see that the TailwindCSS <code>checked:</code> variant can be enabled to change the input element when checked, but how can I change the input's label when checked?</p>
  <p>Here is the relevant Tailwind CSS <a href="https://tailwindcss.com/docs/hover-focus-and-other-states#active" rel="noreferrer">docs</a>.</p>
  <p>Sample code below.</p>
  <p>After enabling the variant in <code>tailwind.config.js</code>, putting <code>checked:bg-green-300</code> in the div or the label doesn't work. It only works in the input.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;label&gt;
      &lt;input checked type=&quot;radio&quot; name=&quot;option1&quot; id=&quot;option1&quot; className=&quot;hidden&quot; /&gt;
      &lt;div&gt;option1&lt;/div&gt;
    &lt;/label&gt;
    &lt;label&gt;
      &lt;input checked type=&quot;radio&quot; name=&quot;option2&quot; id=&quot;option1&quot; className=&quot;hidden&quot; /&gt;
      &lt;div&gt;option2&lt;/div&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>