SVG backgrounds not working for Tailwind v4.0.0

[AlanKha]

What version of Tailwind CSS are you using?

v4.0.0

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

Vite 5.2.12

What version of Node.js are you using?

10.9.0

What browser are you using?

Arc/Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/K2Rma8KsrH

Describe your issue

When migrating to tailwind v4, I noticed that one of my background patterns disappeared. When recreating this scenario with the tailwind sandbox, I noticed that this is only an issue with svgs. In my attempt, I tried 3 different ways to get it to work: using @theme variables, using :root variables, and inserting the link inline. None of these worked

You can see what I am attempting to do if you go to https://alan-khalili.com/ and look and look at the sliding text with my github repos.

edit: After tinkering with this more, I noticed that when the url directly contains the '.svg' extension, it works (playground link), but that still does not work with some services like https://uploadthing.com/ that do not have file extensions in the link

[wongjn]

None of them work because https://2tbvn4haj0.ufs.sh/f/jTupBFNKiwOdtjA6DreDjTUxRyrPAH5NGd4QuIv6qwzJYa2V leads to a 404:

Furthermore, the second doesn't work because:

• bg-* arbitrary value class defaults to background-color if Tailwind can't determine the value type, as with CSS variables. You'd need to type-hint with image:.
• marquee-image is an invalid CSS variable name. You may have meant --marquee-image

The correct form is bg-(image:--marquee-image).