Как я могу сделать плавный переход цвета элемента с помощью Tailwind CSS в реакции? ⇐ CSS

[Anonymous]

У меня есть компонент React, в котором элементы меняют цвет каждые 5 секунд в зависимости от таймера обратного отсчета. Я хочу, чтобы изменение цвета происходило плавно, но мой текущий подход не работает.
Вот код моего компонента:

Код: Выделить всё

  const [colour2,setColour2] = React.useState("from-white to-white");
const [colour3,setColour3] = React.useState("from-white to-white");
const [counter, setCounter] = React.useState(15);

React.useEffect(() => {
counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
if(counter == 0){
setCounter(15)
}
if([11,12,13,14,15].includes(counter)){
setColour1("from-sky-600 to-cyan-300")
setColour2("from-white to-white")
setColour3("from-white to-white")

}
if([6,7,8,9,10].includes(counter)){
setColour2("from-orange-600 to-amber-300 ")
setColour1("from-white to-white")
setColour3("from-white to-white")
}
if([5,4,3,2,1].includes(counter)){
setColour3("from-purple-600 to-pink-600")
setColour2("from-white to-white")
setColour1("from-white to-white")
}
}, [counter]);

return (

{counter}

Contact.


Contact.


Dev.


Dev.


Build.


Build.


)

Я пробовал использовать переход-цвета для облегчения продолжительности-500, но это не делает переход плавным. Как добиться плавных переходов цветов для моих элементов?
Вот демо: ссылка

Подробнее здесь: https://stackoverflow.com/questions/787 ... s-in-react