Tailwind CSS custom gradient with React state and FastAverageColor

Question

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?

doğukan · Accepted Answer · 2022-09-21 14:06:30Z

1

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 style={{color: avgColor}} className="w-full h-full absolute bg-gradient-to-tr from-current to-transparent"></div>

basic demo

edited Sep 21, 2022 at 14:06

answered Apr 29, 2022 at 12:42

doğukan

28k15 gold badges66 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Tailwind CSS custom gradient with React state and FastAverageColor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related