backdrop-blur not working on Safari

[dnish]

What version of Tailwind CSS are you using?

3.4.3

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

PostCSS 8.4.38

What version of Node.js are you using?

V20

What browser are you using?

Safari 18.3

What operating system are you using?

macOS

Reproduction URL

Describe your issue

It seems that backdrop-blur-[x] did stop working on the current version of Safari. Even on the official demo site (https://tailwindcss.com/docs/backdrop-filter-blur) the backdrop blur doesn't work, it only shows a white dive with some transparency.

[philipp-spiess]

Hey! We just tested it with Safari 18.3 on iOS where it works fine. None of us upgraded our macOS just yet so we'll get back to you.

[jeremybdk]

I'm using Safari 18.3 on macOS; it's working for me:

[dnish]

Pretty strange, restarted everything and still got that issue. If I change the CSS setting manually, it works without problems:

-webkit-backdrop-filter: blur(10px)

The "original" settings with the vars doesn't work.

[cmanou]

Can confirm I am also seeing this in tailwind v4 on my site, and on the demo site/docs but only safari on Mac OS and confirming that not using vars works as @dnish pointed out