"blur-x" and "backdrop-blur-x" does not work

[mobayen]

What version of Tailwind CSS are you using?

^3.0.1

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

Nuxt.js ^2.15.7
@nuxt/postcss8 ^1.1.3
postcss ^8.4.5

What version of Node.js are you using?

node: '14.17.1',

What browser are you using?

I've checked it in chrome, and safari
Images are attached

chrome

safari

What operating system are you using?

macOS

Reproduction URL

https://gist.github.com/mobayen/f877f9f3bb14a968cbe4c02c548a832f

Describe your issue

I just upgrades to v3.0.0. Everything seems working fine but the blur
The backdrop-blur-x and blur-x classes do not work if I put them in the <style> tag of a page

BTW, awesome work
Keep it up, guys!

[ivan-bragin]

Can you please check if the required --tw CSS variables are defined?

[finkrer]

They are not. Backdrop filters don't work with @apply currently.

[ivan-bragin]

@finkrer Oh well, I guess I can just put backdrop-filter as a class to explicitly add --tw-backdrop-filter variable in the flow for now until it gets fixed.

[adamwathan]

Thanks for reporting this, this is caused by the same thing internally as #6409 so going to close and consolidate there 👍🏻

[mobayen]

Awesome,
it's fixed in 3.0.2

Thanks @adamwathan