Unexpected CSS minify

[MeteorsLiu]

What version of Tailwind CSS are you using?

v4.1.17

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

Vite: 6.3.5

What version of Node.js are you using?

v25.1.0

What browser are you using?

Firefox 142.0

What operating system are you using?

macOS

Reproduction URL

I wrote my custom CSS class to styles/globals.css

  .glass-card-heavy {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(16px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow:
      0 4px 24px rgba(0, 0, 0, 0.06),
      0 2px 4px rgba(0, 0, 0, 0.03),
      inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  }

When both -webkit-backdrop-filter and backdrop-filter are present, CSS minification remove backdrop-filter and retain -webkit-backdrop-filter. However, -webkit-backdrop-filter is not compatible with Firefox causing the effect is not shown as expect.

Here's the minified result:

.glass-card-heavy {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(16px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

[wongjn]

This is from Lightning CSS optimization. When you're using vendor prefixes, any prefixed versions should come before the "main" CSS declaration. When you do so, it should work.

Furthermore, you don't actually need to add the vendor prefix at all - Lightning CSS would add it for you.

[MeteorsLiu]

This is from Lightning CSS optimization. When you're using vendor prefixes, any prefixed versions should come before the "main" CSS declaration. When you do so, it should work.

Furthermore, you don't actually need to add the vendor prefix at all - Lightning CSS would add it for you.

Why Lightning CSS removes backdrop-blur instead of keeping it?

This seems to run counter to what developers actually intend. The purpose of vendor prefixes like -webkit-is to provide compatibility for specific browsers when a CSS property is not yet universally supported. Once the property is officially supported by browsers, the standard prefix-free version should be used instead.

[wongjn]

You'd have to ask the Lightning CSS devs about that I guess.

Regardless, when you're using vendor prefixes, any prefixed versions should come before the "main" CSS declaration. This is so that the "main" CSS declaration is used if it is supported, and only falls back to the vendor prefixed version when not. When you do so, it should work.

[MeteorsLiu]

Okay. But i still think it's a bug not a feature.

[wongjn]

Feel free to create an issue at https://github.com/parcel-bundler/lightningcss