Blur filters don't work in production build

What version of Tailwind CSS are you using?

2.1.4

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

laravel mix 6.0.19

What version of Node.js are you using?

16.0.0

What browser are you using?

Chrome

What operating system are you using?

maxOS

Reproduction repository

https://github.com/denjaland/tailwind-bug-repro

Describe your issue

We have a div that has applied styles filter blur-3xl Renders quite beautifully on a dev build, but on the production build we have a hideous result:

Dev result:

Production result:

Not really what we are looking for. So I checked the compiled CSS, and this is what I see.

On dev build, I have these styles:

.filter {
    filter: var(--tw-filter);
}
.blur-3xl {
    --tw-blur: blur(64px);
    filter: var(--tw-filter);
}

The production build however has this as a result:

.blur-3xl, .filter {
    filter: var(--tw-filter);
}
.blur-3xl {
    --tw-blur: blur(64px);
}

which, in Chrome at least, doesn’t render correctly.

I’m not sure it’s a bug, but I wouldn’t even know where to begin checking to see what’s causing the issue if it isn’t in the compiler.

I have tested it in regular as well as jit mode with the same result.

[adamwathan]

Yeah GitHub repo would be perfect thank you! Can figure this out for sure 👍🏻

[bradlc]

Hey @denjaland! Tailwind makes heavy use of CSS custom properties (variables), and sometimes an empty value (actually a single space) is used. While this is perfectly valid, some minifiers may handle it incorrectly and break the CSS, so we use comments to “trick” minifiers into producing working output, for example:

*, ::before, ::after {
  --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,/*!*/ /*!*/);
  --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

Now the problem you are running into is happening because you are using Mix’s minify(), which uses clean-css under the hood. Unfortunately, even with our “tricks” clean-css seems to be producing broken output.

Fortunately in this case there is a simple fix, which is to remove minify() completely, since postCss() minifies its output in production anyway. This minification uses cssnano which handles the empty values just fine. Here’s a pull request with the changes required to fix your reproduction: https://github.com/denjaland/tailwind-bug-repro/pull/1

Hope that helps!