diff --git a/CHANGELOG.md b/CHANGELOG.md
index 24f1637b1..dfd9bbd78 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- _Upgrade (experimental)_: Migrate `plugins` with options to CSS ([#14700](https://github.com/tailwindlabs/tailwindcss/pull/14700))
- _Upgrade (experimental)_: Allow JS configuration files with `corePlugins` options to be migrated to CSS ([#14742](https://github.com/tailwindlabs/tailwindcss/pull/14742))
+- _Upgrade (experimental)_: Migrate `max-w-screen-*` utilities to `max-w-[var(…)]`([#14754](https://github.com/tailwindlabs/tailwindcss/pull/14754))
- _Upgrade (experimental)_: Migrate `@variants` and `@responsive` directives ([#14748](https://github.com/tailwindlabs/tailwindcss/pull/14748))
- _Upgrade (experimental)_: Migrate `@screen` directive ([#14749](https://github.com/tailwindlabs/tailwindcss/pull/14749))
diff --git a/integrations/upgrade/index.test.ts b/integrations/upgrade/index.test.ts
index ceec310ae..f7ad73c86 100644
--- a/integrations/upgrade/index.test.ts
+++ b/integrations/upgrade/index.test.ts
@@ -20,7 +20,7 @@ test(
`,
'src/index.html': html`
🤠👋
-
+
`,
'src/input.css': css`
@tailwind base;
@@ -42,7 +42,7 @@ test(
"
--- ./src/index.html ---
🤠👋
-
+
--- ./src/input.css ---
@import 'tailwindcss';
diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/max-width-screen.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/max-width-screen.test.ts
new file mode 100644
index 000000000..3e3151cbc
--- /dev/null
+++ b/packages/@tailwindcss-upgrade/src/template/codemods/max-width-screen.test.ts
@@ -0,0 +1,12 @@
+import { __unstable__loadDesignSystem } from '@tailwindcss/node'
+import { expect, test } from 'vitest'
+import { maxWidthScreen } from './max-width-screen'
+
+test('converts max-w-screen-* to max-w-[theme(screens.*)] (so it will later be converted to the var injection)', async () => {
+ let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
+ base: __dirname,
+ })
+
+ let migrated = maxWidthScreen(designSystem, {}, 'max-w-screen-md')
+ expect(migrated).toMatchInlineSnapshot(`"max-w-[theme(screens.md)]"`)
+})
diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/max-width-screen.ts b/packages/@tailwindcss-upgrade/src/template/codemods/max-width-screen.ts
new file mode 100644
index 000000000..de19c64d5
--- /dev/null
+++ b/packages/@tailwindcss-upgrade/src/template/codemods/max-width-screen.ts
@@ -0,0 +1,26 @@
+import type { Config } from 'tailwindcss'
+import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
+import { printCandidate } from '../candidates'
+
+export function maxWidthScreen(
+ designSystem: DesignSystem,
+ _userConfig: Config,
+ rawCandidate: string,
+): string {
+ for (let candidate of designSystem.parseCandidate(rawCandidate)) {
+ if (
+ candidate.kind === 'functional' &&
+ candidate.root === 'max-w' &&
+ candidate.value?.value.startsWith('screen-')
+ ) {
+ return printCandidate(designSystem, {
+ ...candidate,
+ value: {
+ ...candidate.value,
+ value: `[theme(screens.${candidate.value.value.slice(7)})]`,
+ },
+ })
+ }
+ }
+ return rawCandidate
+}
diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts
index a0579dc4d..eb4d42c1e 100644
--- a/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts
+++ b/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts
@@ -86,6 +86,9 @@ test.each([
// `theme(…)` calls valid in v3, but not in v4 should still be converted.
['[--foo:theme(fontWeight.semibold)]', '[--foo:theme(fontWeight.semibold)]'],
+ // `screens` values
+ ['max-w-[theme(screens.md)]', 'max-w-[var(--breakpoint-md)]'],
+
// Invalid cases
['[--foo:theme(colors.red.500/50/50)]', '[--foo:theme(colors.red.500/50/50)]'],
['[--foo:theme(colors.red.500/50/50)]/50', '[--foo:theme(colors.red.500/50/50)]/50'],
diff --git a/packages/@tailwindcss-upgrade/src/template/migrate.ts b/packages/@tailwindcss-upgrade/src/template/migrate.ts
index 5e2d02eab..d70ca20f9 100644
--- a/packages/@tailwindcss-upgrade/src/template/migrate.ts
+++ b/packages/@tailwindcss-upgrade/src/template/migrate.ts
@@ -7,6 +7,7 @@ import { arbitraryValueToBareValue } from './codemods/arbitrary-value-to-bare-va
import { automaticVarInjection } from './codemods/automatic-var-injection'
import { bgGradient } from './codemods/bg-gradient'
import { important } from './codemods/important'
+import { maxWidthScreen } from './codemods/max-width-screen'
import { prefix } from './codemods/prefix'
import { simpleLegacyClasses } from './codemods/simple-legacy-classes'
import { themeToVar } from './codemods/theme-to-var'
@@ -31,6 +32,7 @@ export const DEFAULT_MIGRATIONS: Migration[] = [
bgGradient,
simpleLegacyClasses,
arbitraryValueToBareValue,
+ maxWidthScreen,
themeToVar,
variantOrder,
]