diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4e5e3d89b2d1..8a4a2570921b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Don't scan source files for utilities unless `@tailwind utilities` is present in the CSS in `@tailwindcss/postcss` and `@tailwindcss/vite` ([#15226](https://github.com/tailwindlabs/tailwindcss/pull/15226))
- Skip reserializing CSS files that don't use Tailwind features in `@tailwindcss/postcss` and `@tailwindcss/vite` ([#15226](https://github.com/tailwindlabs/tailwindcss/pull/15226))
- _Upgrade (experimental)_: Do not migrate the `overflow-clip` utility ([#15244](https://github.com/tailwindlabs/tailwindcss/pull/15244))
+- _Upgrade (experimental)_: Rename `backdrop-blur` to `backdrop-blur-sm` and `backdrop-blur-sm` to `backdrop-blur-xs` ([#15242](https://github.com/tailwindlabs/tailwindcss/pull/15242))
## [4.0.0-beta.3] - 2024-11-27
diff --git a/integrations/upgrade/index.test.ts b/integrations/upgrade/index.test.ts
index cc8016080d03..42cff58dea40 100644
--- a/integrations/upgrade/index.test.ts
+++ b/integrations/upgrade/index.test.ts
@@ -2297,6 +2297,9 @@ test(
blur: {
DEFAULT: 'var(--custom-default-blur)',
},
+ backdropBlur: {
+ DEFAULT: 'var(--custom-default-blur)',
+ },
// Changes the "after" class definition. 'rounded' -> 'rounded-sm' is
// not safe because 'rounded-sm' has a custom value.
@@ -2316,6 +2319,7 @@ test(
@@ -2340,6 +2344,8 @@ test(
--blur: var(--custom-default-blur);
+ --backdrop-blur: var(--custom-default-blur);
+
--radius-sm: var(--custom-rounded-sm);
}
@@ -2365,6 +2371,7 @@ test(
diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.test.ts
index 62278a6f8f5f..5d29c1b71b6b 100644
--- a/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.test.ts
+++ b/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.test.ts
@@ -20,6 +20,9 @@ test.each([
['blur', 'blur-sm'],
['blur-sm', 'blur-xs'],
+ ['backdrop-blur', 'backdrop-blur-sm'],
+ ['backdrop-blur-sm', 'backdrop-blur-xs'],
+
['ring', 'ring-3'],
['blur!', 'blur-sm!'],
diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.ts b/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.ts
index 8d55a9d85fe8..adf31e7f4801 100644
--- a/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.ts
+++ b/packages/@tailwindcss-upgrade/src/template/codemods/legacy-classes.ts
@@ -29,6 +29,9 @@ const LEGACY_CLASS_MAP = new Map([
['blur', 'blur-sm'],
['blur-sm', 'blur-xs'],
+ ['backdrop-blur', 'backdrop-blur-sm'],
+ ['backdrop-blur-sm', 'backdrop-blur-xs'],
+
['ring', 'ring-3'],
])
@@ -50,6 +53,10 @@ const THEME_KEYS = new Map([
['blur-sm', '--blur-sm'],
['blur-xs', '--blur-xs'],
+ ['backdrop-blur', '--backdrop-blur'],
+ ['backdrop-blur-sm', '--backdrop-blur-sm'],
+ ['backdrop-blur-xs', '--backdrop-blur-xs'],
+
['ring', '--ring-width'],
['ring-3', '--ring-width-3'],
])