Backdrop filter not working after build #7044
Replies: 29 comments 29 replies
-
|
Hey! Do you have a repo where we can have a look? Is the |
Beta Was this translation helpful? Give feedback.
-
|
I see a similar bug with The I suspect one of the changes in 3.0.12 broke some of these filters including the 3.0.12: 3.0.11: |
Beta Was this translation helpful? Give feedback.
-
|
Yes, exactly this. Thank you! |
Beta Was this translation helpful? Give feedback.
-
|
Hi!
These are the first lines of the css:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
… Op 12 jan. 2022, om 23:10 heeft Simon Vrachliotis ***@***.***> het volgende geschreven:
Hey!
Do you have a repo where we can have a look? Is the @tailwind base; directive present in your CSS file? It's responsible to set some CSS variables, including stuff for filters, so make sure it's there.
—
Reply to this email directly, view it on GitHub <#7044 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHEAR56PEQQAATY7537BPYLUVX34LANCNFSM5L2DPOKA>.
You are receiving this because you authored the thread.
|
Beta Was this translation helpful? Give feedback.
-
|
invert not work on safari after build |
Beta Was this translation helpful? Give feedback.
-
|
I think I've figured out the source of the problem. At least it was the source of the problem for me 😇 In production, my tailwind code was getting run through sass, and sass was tossing out the last backdrop filter variable assignment for some unknown reason. So I should have had: *, ::before, ::after {
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia ;
}But in my case it left out the sepia variable. So when the browser was trying to resolve I could have fixed it a couple of different ways. I could have manually declared the --tw-backdrop-sepia variable. But what I ended up doing was removing sass from the pipeline and going with an all postcss pipeline which didn't have the bug. Now that all the backdrop variables are initialized, the class is working as intended. |
Beta Was this translation helpful? Give feedback.
-
|
3.0.11 works, but it's because 3.0.12 added the variable declarations that sass was mangling. This is the PR that introduced the changes that are causing the problems listed here: #6926. But I don't think the problem we're all experiencing is due to a bug in that PR, it's due to a bug elsewhere in our respective build pipelines. My reasoning for this is that if you strip away everything else, and just use the Tailwind CDN, it works fine: https://play.tailwindcss.com/My70K5zys8 |
Beta Was this translation helpful? Give feedback.
-
|
I see, good information here. I'll play around a bit, but unfortunately for me, I cannot remove sass as I am using tailwind in conjunction with a rails app. rails uses webpacker, which in its current version lists looks like webpacker v6, which is due out soon, drops sass as a dependency, although I'll still have issues as some of the libraries I bring in to my app contain sass files. |
Beta Was this translation helpful? Give feedback.
-
|
I'm using webpacker as well. You don't have to remove sass from your dependencies, you just need to remove it from the build pipeline that handles tailwind. So the sass loader only handles I'll see if I can get you more details on my exact setup tomorrow when I'm back in front of it. |
Beta Was this translation helpful? Give feedback.
-
|
@Lordnibbler so I'm using webpacker Then I have a tailwind.js file, which is an entrypoint file (or pack file, I forget the webpacker term used). The tailwind.js just imports a tailwind.css file, and the tailwind.css file has the |
Beta Was this translation helpful? Give feedback.
-
|
Oh, I understand. Yes, that is how I have tailwind build configured as well, just a simple |
Beta Was this translation helpful? Give feedback.
-
|
Had the same issue. In production build some of the CSS custom properties were removed
Then i've noticed that during production build Vite is logging some warnings
Updated Vite from |
Beta Was this translation helpful? Give feedback.
-
|
Hi all! This appears to be, at least in some of the cases, a bug in postcss parsing that doesn't mix well with some cssnano optimizations. Can you upgrade your projects to the latest versions of postcss (>= 8.4.6) and cssnano and see if the problem disappears? |
Beta Was this translation helpful? Give feedback.
-
|
Unfortunately no change in build result after updating postcss. |
Beta Was this translation helpful? Give feedback.
-
|
ah that's a bummer so it appears that more than just an postcss + cssnano issue. As far as Tailwind CSS goes it is generating the appropriate CSS in dev or production builds. So other PostCSS plugins, build tooling, or minification appears to be the issue here. |
Beta Was this translation helpful? Give feedback.
-
|
Downgrading to 3.0.10 worked for me. |
Beta Was this translation helpful? Give feedback.
-
|
Downgrading to 3.0.10 worked out nicely, |
Beta Was this translation helpful? Give feedback.
-
|
In my use case I'm not using tailwind base because it saves me some bytes, ExampleRemember to use a background with an alpha, like I'm only using this: <div className="backdrop-blur-md backdrop-saturate-50 bg-[rgba(255,255,255,0.8)]">tailwind 3.0.21 adds this snippet: .backdrop-saturate-50 {
--tw-backdrop-saturate: saturate(.5);
}
.backdrop-blur-md, .backdrop-saturate-50 {
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-md {
--tw-backdrop-blur: blur(12px);
}On this print bellow, devtools shows in blue color the custom properties applied to the backdrop-filter, just two out of nine.
The snippet above does not work as expected, but this script bellow does work: .backdrop-saturate-50 {
--tw-backdrop-saturate: saturate(.5);
}
.backdrop-blur-md, .backdrop-saturate-50 {
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-saturate);
}
.backdrop-blur-md {
--tw-backdrop-blur: blur(12px);
}Work-around-ishPre-defined all backdrop related custom properties even though your project doesn't need them, so the backdrop-filter from tailwindcss will evaluate the correct CSS expression. Problem "solved", what do you think? |
Beta Was this translation helpful? Give feedback.
-
|
having the same issue highlighted and this didn't fix it |
Beta Was this translation helpful? Give feedback.
-
|
I commented the extractCss option in // Build Configuration: https://go.nuxtjs.dev/config-build
build: {
// extractCSS: true,
}
} |
Beta Was this translation helpful? Give feedback.
-
|
Hey everyone! I have the same problem using filters (filter and backdrop-filter). It works on my local machine in dev mode but it won't work when running it in production. What fixed it for me was adding a custom class where the filter is set by me like (not my preferred solution but it works): Somehow empty variables get stripped in the production build process of NuxtJS or a plugin that's used in there. Thank you for reading. Have a great day! Best wishes |
Beta Was this translation helpful? Give feedback.
-
|
Hello. I don't use nuxt.js but I had a similar problem. Fix was to not minify CSS. I use gulp scripts to run development and build steps. For dev: I use a For production: gulp first inlines the CSS between It turns out, minification breaks the backdrop blur for me and setting it to I hope this can help someone. Good days! |
Beta Was this translation helpful? Give feedback.
-
|
Chrome (Version 98.0.4758.109) on Mac obviously has a bug. The drop-shadows based on the filter utility do not work as expected. The css var defaults are ignored. Once you check one css var in the developer tools all css var defaults are respected. |
Beta Was this translation helpful? Give feedback.
-
|
I have the same issue. Css error because of the empty values for some vars. CSS: I don't even use filters, so I don't understand why these variables are added. config: The exact same setup, where I change content for purge with Tailwind 2 works correctly. The variables are added without causing an error in the output. |
Beta Was this translation helpful? Give feedback.
-
|
Also encountered this bug today. I worked around it by changing my default style.sass to this: @tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
* {
--tw-backdrop-sepia: ;
--will-be-deleted: ;
}
}You'll see that the last definition |
Beta Was this translation helpful? Give feedback.
-
|
I just encountered this issue in production too. Using postcss (8.4.12) with cssnano (5.1.5) with latest (3.0.23) TailwindCSS. Filters worked in development, not in production. Fixed (for now) by downgrading TailwindCSS to 3.0.11 from advice in this thread This definitely seems like a bug to me. |
Beta Was this translation helpful? Give feedback.
-
|
I have the same issue, I tried downgrading to tailwind 3.0.11 but still not works, can anyone tell the proper way to downgrade it? maybe I missed some step. |
Beta Was this translation helpful? Give feedback.
-
|
have you tried my workaround? Works for me without downgrading anything |
Beta Was this translation helpful? Give feedback.
-
|
Hi Sir, thanks for reply, and now i solved it by changing the target from 'static' to 'server' in nuxt.config.js |
Beta Was this translation helpful? Give feedback.
-
|
my current issue:
UPDTAE: |
Beta Was this translation helpful? Give feedback.
-
|
Same issue using Nuxt JS 2.15.8, Postcss 8.4.12 and Tailwind 3.0.23.
|
Beta Was this translation helpful? Give feedback.
-
|
I downgraded to 3.0.11 and it worked |
Beta Was this translation helpful? Give feedback.
-
|
Downgrading to 3.0.10 fixed issues for me with --tw-xx filter variables being removed. |
Beta Was this translation helpful? Give feedback.
-
|
If this is an issue for anyone, the best way to actually push things forward is to open an issue that includes a minimal reproduction 👍 We aren't seeing this on our own projects, and any time we've looked into it the real issue has been a bug in whatever CSS minifier was being used. But we have no issues that we've seen using cssnano for our stuff. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @adamwathan , thanks for your reply and for your awesome framework! I opened this as an issue, but it got moved to discussions somehow. As a check I created a new Nuxtjs project with only Tailwindcss included like the Tailwindcss doc explains: https://tailwindcss.com/docs/guides/nuxtjs I created a div with some text and a div overlay with blur applied to it. But when generating static html/css it doesn't apply the blur anymore: The only difference I see is this: Could that be the issue? Adding or removing Hope you guys can use this input. My enviroment is as statet in my first comment. |
Beta Was this translation helpful? Give feedback.
-
|
As on tailwind 3.0.24 the issue is still present! |
Beta Was this translation helpful? Give feedback.
-
|
Same here! |
Beta Was this translation helpful? Give feedback.
-
|
Yup! Still running into it too |
Beta Was this translation helpful? Give feedback.
-
|
here too! |
Beta Was this translation helpful? Give feedback.
-
|
I had this issue while using Vite. I upgraded to version "2.9.9" and the issue resolved itself. |
Beta Was this translation helpful? Give feedback.
-
|
"tailwindcss": "^3.1.2" Some problem. Backdrop-blur doesnt work on production build |
Beta Was this translation helpful? Give feedback.
-
|
Issue still present in Tailwind 3.1 and Nuxt 2
|
Beta Was this translation helpful? Give feedback.
-
|
TL;DR: add Issue prevails, but this doesn't seem to be a Tailwind issue but a Nuxt issue (more specifically a
Running > npm explain cssnano
cssnano@4.1.11
node_modules/optimize-css-assets-webpack-plugin/node_modules/cssnano
cssnano@"^4.1.10" from optimize-css-assets-webpack-plugin@5.0.8
node_modules/optimize-css-assets-webpack-plugin
optimize-css-assets-webpack-plugin@"^5.0.4" from @nuxt/webpack@2.15.8
node_modules/@nuxt/webpack
@nuxt/webpack@"2.15.8" from @nuxt/builder@2.15.8
node_modules/@nuxt/builder
@nuxt/builder@"2.15.8" from nuxt@2.15.8
node_modules/nuxt
nuxt@"^2.15.8" from the root project
peer nuxt@"^2.15" from @nuxtjs/composition-api@0.25.2
node_modules/@nuxtjs/composition-api
dev @nuxtjs/composition-api@"^0.25.2" from the root project
@nuxt/webpack@"2.15.8" from nuxt@2.15.8
node_modules/nuxt
nuxt@"^2.15.8" from the root project
peer nuxt@"^2.15" from @nuxtjs/composition-api@0.25.2
node_modules/@nuxtjs/composition-api
dev @nuxtjs/composition-api@"^0.25.2" from the root projectThere recently has been in a fix in The best way to do this is by upgrading the peer dependencies of optimize-css-assets-webpack-plugin, but that package doesn't seem to be updated anymore. In the meantime you can simply upgrade the peer dependencies in your own "peerDependencies": {
"cssnano": "^5.1.12"
}If the issue is still there you might want to add the following variables to your main.css/tailwind.css file to make sure they're actually present: |
Beta Was this translation helpful? Give feedback.
-
|
Thank you @jasperverbeet, this was insightful and I thought it would actually fix the issue. Although I was not able to fix it by simply adding a peerDependencies. My NuxtJS is pretty minimal I'm not sure what could be interfering. Here is what it looks like after adding the dependency and running npm explain cssnano. I am using the same nuxt version as you (2.15.8). I am curious what package and version of TailwindCSS you're using. I am using @nuxtjs/tailwindcss (5.1.3) Are you using tailwindlabs/tailwindcss? Do you think it matters what package I am using? Cheers! |
Beta Was this translation helpful? Give feedback.
-
|
Hmmm weird, maybe I mixed things up or something. I created a local prototype and the issue disappeared for me after I added the peerDependency. The issue was introduced in 3.0.12: v3.0.11...v3.0.12, somehow the empty CSS variables with the Nuxt CSS optimizer remove the empty variables entirely. |
Beta Was this translation helpful? Give feedback.
-
|
It may possibly have to do with refactoring defaults in the commit f2d73b8 from #6926 ? |
Beta Was this translation helpful? Give feedback.
-
|
Same issue, tried a few different solutions on this thread but in the end the only that worked was downgrading to 3.0.10 hopefully this gets picked up soon but for now it will have to do. |
Beta Was this translation helpful? Give feedback.
-
|
downgrading to version 3.0.11 helped me |
Beta Was this translation helpful? Give feedback.
-
|
Followed @Akryum's suggestion, these options did it for me: NuxtJS + tailwind |
Beta Was this translation helpful? Give feedback.
-
|
Same issue here but even with minimum setup like in tailwind documentation (with tailwind cli). Only downgrading tailwind version to 3.0.10 - as mentioned by others - is working. |
Beta Was this translation helpful? Give feedback.
-
|
Downgrade also not working here within a nuxt 2. In my case I use dropshadow and grayscale filters... |
Beta Was this translation helpful? Give feedback.
-
|
Same issue here with create-react-app. When building our app, all the empty custom variables like --tw-backdrop-brightness, --tw-backdrop-contrast got deleted from the css, which was causing issues with the backdrop filter. The workaround we ended up using, was to add a custom plugin in the tailwind.config.js to override the existing backdrop-blur plugin from tailwind. Basically we just reused the one from tailwind but updated it by adding a fallback for each variable (--tw-variable-name,) In that way, even if the variable is not defined in the css, there is a fallback that is set to an empty value. More details about this trick here: https://css-tricks.com/optional-custom-property-values-trick/ |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, @mcenatie, nice workaround. |
Beta Was this translation helpful? Give feedback.
-
|
With this I run into: workaround is to update it to a unique name, |
Beta Was this translation helpful? Give feedback.
-
|
Ended up using the following solution so the minifier wouldn't consider : ; as invalid which finally worked for a production build: Taken from: #7121 (comment) |
Beta Was this translation helpful? Give feedback.
-
|
Worked for me, thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Hey guys, hi @adamwathan. First of all, thank you for this amazing framework, this is the kind of stuff that changes the world. It seems I can't make I've pushed a minimal reproducible version of a brand new NextJS project using Also deployed it with GitHub pages for immediate access if you want to take a look at those generated classes: Test Deploy Here's a sample screenshot: Only thing needed to run the project locally is All help would be much appreciated 🙏 Cheers. EDIT ✍️Looks like I rushed it. |
Beta Was this translation helpful? Give feedback.
and others
-
What version of Tailwind CSS are you using?
v3.0.13
What build tool (or framework if it abstracts the build tool) are you using?
Nuxt.js v2.14.12
What version of Node.js are you using?
v16.13.0
What browser are you using?
Chrome, Safari
What operating system are you using?
MacOs Monterey v12.1
Reproduction URL
Describe your issue
I have a div on top of an image with backdrop blur applied to it. During development everything looks fine. After building, the backdrop filter blur isn't working, but the css is there. Not tested with other filters.
I'm using the class backdrop-blur-lg and generates:
.backdrop-blur-lg { --tw-backdrop-blur: blur(16px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); }At the end when I delete the undefined filters from the css in the console (I only use backdrop blur), the backdrop filter does its job again (Chrome and Safari).
Beta Was this translation helpful? Give feedback.
All reactions