bg-(--my-var) incorrectly interprets gradients as color rather than image

[jhobz]

What version of Tailwind CSS are you using?

v4.1.18

What build tool (or framework if it abstracts the build tool) are you using?

Vite (rolldown-vite) v7.2.5

What version of Node.js are you using?

v24.12.0

What browser are you using?

Chrome

What operating system are you using?

Windows 11

Reproduction URL

https://play.tailwindcss.com/wJXauCDSWU

Describe your issue

If you try to use bg-(--some-custom-gradient) to set a background gradient, Tailwind will set background-color: var(--some-custom-gradient) instead of background-image: var(--some-custom-gradient). This occurs even if you define the custom property to be an image with @property.

[wongjn]

As per the documentation, you'd need to use a type-hint like bg-(image:--some-custom-gradient). See this updated Tailwind Play

[jhobz]

Thanks! Somehow I missed that both there and in the "resolving ambiguities" section of the overall customization page. I wonder if I had accidentally ended up on an old version of the site from a google search or something. Appreciate the response!