backdrop-blur-none still applies a blur

[adamwathan]

Discussed in #13820

^{Originally posted by skoshx June 11, 2024}
Using backdrop-blur-none still applies a blur (although it is 0px)

.backdrop-blur-none {
    --tw-backdrop-blur: blur(0);
    -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);
}

The expected behavior is to remove any backdrop blur?

Basically, I have a component that merges tailwind classes, and by default has backdrop-blur-sm, after merging the backdrop-blur-none class overrides the previous, but it doesn't set --tw-backdrop-blur: none, instead it sets it to blur(0) which actually still creates a blur effect.

[adamwathan]

I think the fix for this is just going to be this:

  .backdrop-blur-none {
-     --tw-backdrop-blur: blur(0);
+     --tw-backdrop-blur: ;
      -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);
  }

[RobinMalfait]

This was indeed the fix, before this looking at the backdrop-filter value it would say blur(0px), now with the empty value it results to none (assuming no other filter is active).

This should now be fixed by #13830