Use no value instead of blur(0px) for backdrop-blur-none and blur-none utilities (#13830)

* map `backdrop-blur-none` and `blur-none` to ` ` instead of `blur(0px)`

* add test for `backdrop-blur-none` and `blur-none`

* update changelog

Author: RobinMalfait

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Disable automatic `var()` injection for anchor properties ([#13826](https://github.com/tailwindlabs/tailwindcss/pull/13826))
+- Use no value instead of `blur(0px)` for `backdrop-blur-none` and `blur-none` utilities ([#13830](https://github.com/tailwindlabs/tailwindcss/pull/13830))
 
 ## [3.4.4] - 2024-06-05
 

src/corePlugins.js

@@ -2596,7 +2596,7 @@ export let corePlugins = {
       {
         blur: (value) => {
           return {
-            '--tw-blur': `blur(${value})`,
+            '--tw-blur': value.trim() === '' ? ' ' : `blur(${value})`,
             '@defaults filter': {},
             filter: cssFilterValue,
           }
@@ -2751,7 +2751,7 @@ export let corePlugins = {
       {
         'backdrop-blur': (value) => {
           return {
-            '--tw-backdrop-blur': `blur(${value})`,
+            '--tw-backdrop-blur': value.trim() === '' ? ' ' : `blur(${value})`,
             '@defaults backdrop-filter': {},
             'backdrop-filter': cssBackdropFilterValue,
           }

stubs/config.full.js

@@ -70,7 +70,7 @@ module.exports = {
     },
     blur: {
       0: '0',
-      none: '0',
+      none: '',
       sm: '4px',
       DEFAULT: '8px',
       md: '12px',

tests/basic-usage.test.css

@@ -974,6 +974,11 @@
   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);
 }
+.blur-none {
+  --tw-blur: ;
+  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);
+}
 .brightness-150 {
   --tw-brightness: brightness(1.5);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
@@ -1027,6 +1032,12 @@
     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-blur-none {
+  --tw-backdrop-blur: ;
+  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-brightness-50 {
   --tw-backdrop-brightness: brightness(0.5);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)

tests/basic-usage.test.js

@@ -129,7 +129,7 @@ test('basic usage', () => {
           <div
             class="
               filter filter-none
-              blur-md
+              blur-md blur-none
               brightness-150
               contrast-50
               drop-shadow-md
@@ -144,7 +144,7 @@ test('basic usage', () => {
             class="
               backdrop-filter
               backdrop-filter-none
-              backdrop-blur-lg
+              backdrop-blur-lg backdrop-blur-none
               backdrop-brightness-50
               backdrop-contrast-0
               backdrop-grayscale