Add backdrop-blur-none and blur-none utilities (tailwindlabs#13831)

* add `backdrop-blur-none` and `blur-none` utilities

* update changelog

Author: RobinMalfait

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add `rounded-4xl` utility ([#13827](https://github.com/tailwindlabs/tailwindcss/pull/13827))
+- Add `backdrop-blur-none` and `blur-none` utilities ([#13831](https://github.com/tailwindlabs/tailwindcss/pull/13831))
 
 ## [4.0.0-alpha.16] - 2024-06-07
 

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -375,6 +375,7 @@ exports[`getClassList 1`] = `
   "auto-rows-fr",
   "auto-rows-max",
   "auto-rows-min",
+  "backdrop-blur-none",
   "backdrop-brightness-0",
   "backdrop-brightness-100",
   "backdrop-brightness-105",
@@ -517,6 +518,7 @@ exports[`getClassList 1`] = `
   "bg-transparent",
   "bg-transparent",
   "block",
+  "blur-none",
   "border",
   "border-b",
   "border-b-current",

packages/tailwindcss/src/utilities.test.ts

@@ -10310,6 +10310,7 @@ test('filter', () => {
         'filter-none',
         'filter-[--value]',
         'blur-xl',
+        'blur-none',
         'blur-[4px]',
         'brightness-50',
         'brightness-[1.23]',
@@ -10346,6 +10347,11 @@ test('filter', () => {
       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, );
+    }
+
     .blur-xl {
       --tw-blur: blur(var(--blur-xl, 24px));
       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, );
@@ -10581,6 +10587,7 @@ test('backdrop-filter', () => {
         'backdrop-filter',
         'backdrop-filter-none',
         'backdrop-filter-[--value]',
+        'backdrop-blur-none',
         'backdrop-blur-xl',
         'backdrop-blur-[4px]',
         'backdrop-brightness-50',
@@ -10618,6 +10625,12 @@ test('backdrop-filter', () => {
       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-blur-none {
+      --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, );
+    }
+
     .backdrop-blur-xl {
       --tw-backdrop-blur: blur(var(--blur-xl, 24px));
       -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, );

packages/tailwindcss/src/utilities.ts

@@ -3253,6 +3253,8 @@ export function createUtilities(theme: Theme) {
       ],
     })
 
+    staticUtility('blur-none', [filterProperties, ['--tw-blur', ' '], ['filter', cssFilterValue]])
+
     functionalUtility('backdrop-blur', {
       themeKeys: ['--backdrop-blur', '--blur'],
       handle: (value) => [
@@ -3263,6 +3265,13 @@ export function createUtilities(theme: Theme) {
       ],
     })
 
+    staticUtility('backdrop-blur-none', [
+      backdropFilterProperties,
+      ['--tw-backdrop-blur', ' '],
+      ['-webkit-backdrop-filter', cssBackdropFilterValue],
+      ['backdrop-filter', cssBackdropFilterValue],
+    ])
+
     functionalUtility('brightness', {
       themeKeys: ['--brightness'],
       handleBareValue: ({ value }) => {