backdrop-blur-none still applies a blur

[skoshx]

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]

Thanks for raising! I think we could replace this with this implementation:

  .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);
  }

Will raise with the team to take a look 👍

[skoshx]

Thanks for the quick reply! And yeah, sounds great!

Should I open an issue for this, or is it fine to keep tracking progress in this discussion?

[skoshx]

Closed by #13830