diff --git a/CHANGELOG.md b/CHANGELOG.md index b8169a6e2aa6..906f87a3968c 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/corePlugins.js b/src/corePlugins.js index 0c3f96b1751f..a98582af5dd2 100644 --- a/src/corePlugins.js +++ b/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, } diff --git a/stubs/config.full.js b/stubs/config.full.js index 8eddd48984ba..cced152587ee 100644 --- a/stubs/config.full.js +++ b/stubs/config.full.js @@ -70,7 +70,7 @@ module.exports = { }, blur: { 0: '0', - none: '0', + none: '', sm: '4px', DEFAULT: '8px', md: '12px', diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index 49107dd91db7..57b887d6d4b6 100644 --- a/tests/basic-usage.test.css +++ b/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) diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js index bde7df67d93d..df41b849c582 100644 --- a/tests/basic-usage.test.js +++ b/tests/basic-usage.test.js @@ -129,7 +129,7 @@ test('basic usage', () => {