diff --git a/CHANGELOG.md b/CHANGELOG.md index 9f30f6bae947..67bcea25c91f 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 ### 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 diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 8fcf523dd28a..296f2edb9533 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/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", diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 5720d69c5a34..57903c31cbd6 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/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, ); diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 07ca76528e59..7bb691939442 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/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 }) => {