Filters not working on production build

[huco95]

Hi,

I am using tailwind 3.0.15 with Nuxt.js. I have a problem using the following filters with a background image:

  <section
    class="relative flex items-center justify-center min-h-screen before:content-[''] before:bg-hero-image before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-cover before:filter before:grayscale before:brightness-50"
  >

On dev build it works but not on production build.

You can see the full code here: https://github.com/huco95/don-jamon-web/blob/master/components/Hero.vue

Thanks!🙏

[Lordnibbler]

Seeing similar issues, posted my findings here: #7044

Seems to be 3.0.12 and above broke this. Try downgrading to 3.0.11 and report if it fixes for you?

[willcosgrove]

I was also running into this issue. Downgrading to 3.0.11 fixed the issue for me

[huco95]

Thanks! I will try this!

[onmax]

I think this only happens when you apply more than one filter. I don't know if that helps to solve the issue 🐕‍🦺

[Benjamin-Lee]

I don't think so, since I am only using one filter and still getting this error.

[WeaverOfTheWeb]

This still seems to be broken in v3.1.8

[ji-horak]

v3.2.1 still broken

[coaperator]

v3.2.2 still broken
downgrading to version 3.0.11 helped me

[daafbleumink]

v3.2.4 still broken.
downgrading to version 3.0.11 helped me

[prikr]

Ha Daaf, jij ook hier!

[adamwathan]

The issue is in your minifier, you must be using some old version of cssnano or similar that is improperly minifying the CSS.

Here's the difference between v3.0.11 and v3.0.12:

/* v3.0.11 */
* {
  --tw-blur: var(--tw-empty,/*!*/ /*!*/);
  --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
  --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
  --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
  --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
  --tw-invert: var(--tw-empty,/*!*/ /*!*/);
  --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
  --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
  --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
}

/* v3.0.12 */
* {
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
}

What we were doing in v3.0.11 was a lame hack/trick to prevent the minifier from removing the space before the semicolon. That bug was fixed in all minifiers, so we removed the var stuff because it was no longer necessary and introduced a performance cost.

So make sure you are on the latest version of whatever CSS minification tool you are using and everything will work. If not it is a bug in your minifier that is removing important whitespace.

[daafbleumink]

I appreciate the reply @adamwathan! Makes sense. I suppose it's something to do with me using Nuxt 2.15.8 and the webpack + cssnano versions they are using in that version. I suppose upgrading to Nuxt 3 would resolve this issue.

For now I have added the grayscale classes to my CSS manually.

[ajdiyassin]

I have the same issue but in the Development build
I'm using v3.2.4
Only grayscale not working

[riderx]

v3.2.7 still broken for me

[riderx]

i made a vue component and added this style to fix the issue:

<style scoped>
.blur-lg {
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
}
</style>

[WeaverOfTheWeb]

I don't see this ever getting fixed....

[FabianoLothor]

So, I was also getting this kind of issue, that's what I noticed:

When using the filter class into my code the CSS class were being applied to the page, but without use the class and trying to add it to some element using inspect element, the class isn't loaded and the filter obviously doesn't work.