Tailwind CSS 带有 React 状态和 FastAverageColor 的自定义渐变

Question

我正在尝试使用 React 状态、Tailwind CSS 和 FastAverageColor 包 (https://www.npmjs.com/package/fast-average-color) 在图像上添加自定义渐变到我的 Next JS 应用程序中。我正在为此使用 useEffect 挂钩：

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])

JSX 如下所示：

        <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>

问题是我的渐变没有出现在图像上。你知道为什么会这样吗？

Answer 1

无法使用 JIT 类但您可以使用 from-current 并设置内联颜色来设置起始颜色。

所以，试试这个：

setAvgColor(result.hex)

和

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

basic demo

Tailwind CSS 带有 React 状态和 FastAverageColor 的自定义渐变

Tailwind CSS custom gradient with React state and FastAverageColor

reactjs

tailwind-css