0

I'm using Tailwind and the Radio Group component from Headless UI. By default, the transition between checked and unchecked styles is happening instantly with no animation. I'd like to add a smooth transition between the two states.

Normally I do this with the Tailwind CSS Transition classes but in this case it doesn't work. Here's my code:

<RadioGroup.Option
 className="..."
  value={value}
>
  {({ checked }) => (
    <div
      className={`...bg-black text-white transition-colors duration-500 ${
        checked ? "bg-white text-black" : ""
      }`}
    >
      {label}
    </div>
  )}
</RadioGroup.Option>

What would be the best way to accomplish a smooth transition between the CSS classes of the checked and unchecked states?

mbaytas
  • 2,676
  • 7
  • 26
  • 37
  • did you check if the `transition` utilities are properly loaded? – Xiduzo Nov 27 '22 at 14:40
  • @Xiduzo could you please elaborate? I am sure that `transition-*` works for `hover:` states etc. but when classes are added via the `checked` state it doesn't work. – mbaytas Nov 28 '22 at 08:36
  • just inspect the element in your DOM and validate that the `transition-colors` class actually put the utility class to your element – Xiduzo Nov 28 '22 at 08:39
  • Yes, I can see that the `transition-colors` class is applied and the resulting CSS `transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;` etc. are applied on the element. – mbaytas Nov 28 '22 at 08:46

0 Answers0