Invert class not working on production

[hose1021]

What version of Tailwind CSS are you using?

v3.2.4

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

postcss 8.4.20, Nuxt.js 2, webpack 4

What version of Node.js are you using?

v16

What browser are you using?

Chrome

What operating system are you using?

Windows

Building

For build and run on production used this commands:
nuxt build --modern=server
nuxt start --modern=server

Problem

On production invert class not working. I think it happens because:

    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;

not generating in production.

You can check it on this link: https://hire.az/ru/pricing

[adamwathan]

Probably a minifier bug, especially since it looks like you may be on some older versions of things. Make sure your CSS is being minified using the latest version of whatever minifier Nuxt is using under the hood, likely cssnano.

[hose1021]

Related to #7044

Short answer:
In nuxt.config.js

minifyCSS: true,
minifyJS: true,
extractCSS: true,
optimizeCSS: false,

[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.