How do I make the background color transition on hover in tailwind?

I am trying to make a gradient background color change when I hover over a div, but I think the way my component is set up it is not letting me. I will share an example of my component

Nested ProjectItem component:

import React from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { FaExternalLinkAlt, FaGithubSquare } from 'react-icons/fa'

const ProjectItem = ({ title, alt, tech, bgImg, projectURL, githubURL }) => {
    return (
        <div className='border relative flex items-center justify-center h-auto w-full shadow-xl shadow-gray-200 rounded-xl p-4 group transition bg-white hover:bg-gradient-to-r from-[#001f54] to-[#002668]'>
            <Image src={bgImg} alt={alt} className='rounded-xl group-hover:opacity-10' />
            <div className='hidden group-hover:block absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]'>
                <h3 className='text-2xl text-white tracking-wider text-center'>{title}</h3>
                <p className='pb-4 pt-2 text-white text-center'>{tech}</p>
                <div className='flex justify-center gap-6'>
                    <div className='rounded-full shadow-lg bg-slate-100 p-4 cursor-pointer transition hover:bg-lite-blue hover:text-slate-100 hover:scale-105 ease-in duration-75'>
                        <Link href={githubURL} title='GitHub Repo' target='_blank' rel='noopener noreferrer'>
                            <FaGithubSquare size={30} />
                        </Link>
                    </div>
                    <div className='rounded-full shadow-lg bg-slate-100 p-4 cursor-pointer transition hover:bg-lite-blue hover:text-slate-100 hover:scale-105 ease-in duration-[0ms]'>
                        <Link href={projectURL} title='Deployed Project' target='_blank' rel='noopener noreferrer'>
                            <FaExternalLinkAlt size={30} />
                        </Link>
                    </div>
                </div>
            </div>
        </div>

    )
}

export default ProjectItem

Here is the Projects component, which maps each ProjectItem subcomponent:

import React from 'react'
import weatherApp from '../public/assets/weatherapp.png'
import firesale from '../public/assets/firesale-final.png'
import ProjectItem from './ProjectItem'

const Projects = () => {

    const projItemArr = [
        { title: "OpenWeather API Forecast Checker", alt: "Weather Forecasting Application", tech: "JavaScript, Bulma", bgImg: weatherApp, projectURL: "https://dopecello.github.io/weather-app/", githubURL: "https://github.com/dopecello/weather-app" },
        { title: "SupaHot Online Marketplace", alt: "SupaHot Online Marketplace", tech: "CRA, GraphQL, MongoDB", bgImg: firesale, projectURL: "https://supa-hot-firesales.herokuapp.com/", githubURL: "https://github.com/brian-gee/supa-hot-firesale" },
    ]

    return (
        <div id='projects' className='w-full xl:pt-[13rem] xl:pb-[5rem]'>
            <div className='max-w-[1240px] mx-auto px-2 pt-10 pb-10'>
                <p className='text-xl tracking-widest uppercase py-6 text-lite-blue'>Projects</p>
                <div className='grid md:grid-cols-2 gap-8'>
                    {projItemArr.map((index) => {
                        return (
                            <ProjectItem key={index}
                                title={index.title}
                                alt={index.alt}
                                tech={index.tech}
                                bgImg={index.bgImg}
                                githubURL={index.githubURL}
                                projectURL={index.projectURL}
                            />
                        )
                    })}
                </div>
            </div>
        </div>
    )
}

export default Projects

When you hover over the div it gets the color perfectly, but I don't get the smooth transition to the color on hover. Can someone help me?

I tried this in the highlighted div above:

The transition property has an default transition time of 150ms, so I should be seeing a smooth color change like I do on the icons, but its not happening

Solution

If you check what the hover:bg-gradient-to-r generates, it will become pretty clear:

.hover\:bg-gradient-to-r:hover {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

All your code and classes are valid, but a background-image can not just be animated / transitioned with Tailwind.

Maybe this example where some extra CSS for Tailwind allows you to animate a gradient background could help!