How to implement :selected state with TailwindCSS

Question

I read the documentation but I don't find anything about the :selected state in Tailwind CSS. Is there a way to achieve this with Tailwind or it can be only done with JavaScript?

I simplified the problem as much as possible, If the radio button is checked I want to change the parent div's color

    <script src="https://cdn.tailwindcss.com"></script>

    <div class="flex items-center mb-4 focus:bg-blue-100">
        <input id="default-radio-1" type="radio" value="" selected name="default-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
        <label for="default-radio-1" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Default radio</label>
    </div>
    <div class="flex items-center mb-4 active:bg-blue-100">
        <input checked id="default-radio-2" type="radio" value="" name="default-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
        <label for="default-radio-2" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Checked state</label>
    </div>

If I use the active state I reach my goal, but only for a few seconds. I also can`t find other way to achieve this in AlpineJS.

Any help would be appreciated!

Answer 1

With Tailwind it is not possible to style the parent based on the child that is checked, but with this part of the documentation you are able to put different styles on an element AFTER a checked input. It requires the peer class on the input and the peer-checked: prefix for classes that you want to apply when the input has been checked.

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex items-center mb-4 focus:bg-blue-100">
  <input id="default-radio-1" type="radio" value="" selected name="default-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 peer">
  <label for="default-radio-1" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300  peer-checked:bg-red-300 peer-checked:text-white">Default radio</label>
</div>
<div class="flex items-center mb-4 active:bg-blue-100">
  <input checked id="default-radio-2" type="radio" value="" name="default-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
  <label for="default-radio-2" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Checked state</label>
</div>