bg-radial in v4: how to use closest-side?

[tavoyne]

With Tailwind v4, how can I create a radial gradient using closest-side?

This doesn’t seem to work (no gradient renders):

<div className="size-64 bg-[radial-gradient(closest-side,_var(--tw-gradient-stops))] from-blue-400/20 to-transparent" />

Tried escaping the comma too:

<div className="size-64 bg-[radial-gradient(closest-side\,_var(--tw-gradient-stops))] from-blue-400/20 to-transparent" />

Neither worked. Is this a limitation or am I missing something?

Thanks!

[wongjn]

You'd want bg-radial-[closest-side]: https://play.tailwindcss.com/Dqt4tnhxO6

[tavoyne]

Wow thanks

[rozsazoltan]

And if you want to expand the utility palette so that the hint brings up the 4 extra options:

• https://play.tailwindcss.com/LhdD5lTTgj?file=css