I'm trying to add a custom gradient over an image using React state, Tailwind CSS and the FastAverageColor package (https://www.npmjs.com/package/fast-average-color) into my Next JS app. I'm using an useEffect hook for this:
const [avgColor, setAvgColor] = useState("")
useEffect(() => {
const fac = new FastAverageColor()
fac.getColorAsync(songData.track.album.images[0].url, { algorithm: 'dominant' }).then(result => {
setAvgColor(`w-full h-full absolute bg-gradient-to-tr from-[${result.hex}] to-transparent`)
})
}, [avgColor, songData.track.album.images])
The JSX is presented below:
<div className="relative w-full h-full">
<Image priority alt="test" layout='fill' objectFit='cover' src={songData.track.album.images[0].url} />
{avgColor ? <div className={avgColor}></div> : null}
</div>
The problem is that my gradient doesn't appear over the image. Do you know maybe why this happens?
It's not possible to do with JIT classes but you can use from-current
and set an inline color to set the from color.
So, try this:
setAvgColor(result.hex)
and
<div className="w-full h-full absolute bg-gradient-to-tr from-current to-transparent" style={{color: avgColor}}></div>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments