Question 43145 in Html Question posted in
Some basic documentation can be found here.

How to implement :selected state with TailwindCSS – Html

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!

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Tailwind CSS does not implement the :has() pseudo-selector yet (it’s not supported in Firefox). You can still use it in your CSS file though. For example:

    @tailwind base;
@tailwind components;

@layer components {
  div:has(input:checked) {
    @apply bg-red-500;
  }
}

@tailwind utilities;

    You can see a working version of this here: https://play.tailwindcss.com/VHMr7KnWjN

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search