From eb92690f7b5d29e3c23848d7f8cc67395c24f8c7 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Fri, 15 Nov 2024 17:22:26 +0100
Subject: [PATCH 1/7] Bring back `max-w-screen-*` utilities

---
 .../src/compat/apply-compat-hooks.ts          | 10 ++-
 packages/tailwindcss/src/utilities.test.ts    | 69 +++++++++++++++++++
 2 files changed, 78 insertions(+), 1 deletion(-)

diff --git a/packages/tailwindcss/src/compat/apply-compat-hooks.ts b/packages/tailwindcss/src/compat/apply-compat-hooks.ts
index 7a5aa750ce6a..964f78a96fec 100644
--- a/packages/tailwindcss/src/compat/apply-compat-hooks.ts
+++ b/packages/tailwindcss/src/compat/apply-compat-hooks.ts
@@ -1,4 +1,4 @@
-import { styleRule, toCss, walk, WalkAction, type AstNode } from '../ast'
+import { decl, styleRule, toCss, walk, WalkAction, type AstNode } from '../ast'
 import type { DesignSystem } from '../design-system'
 import { segment } from '../utils/segment'
 import { applyConfigToTheme } from './apply-config-to-theme'
@@ -116,6 +116,14 @@ export async function applyCompatibilityHooks({
     }
   })
 
+  designSystem.utilities.functional('max-w-screen', (candidate) => {
+    if (!candidate.value) return
+    if (candidate.value.kind === 'arbitrary') return
+    let value = designSystem.theme.resolve(candidate.value.value, ['--breakpoint'])
+    if (!value) return
+    return [decl('max-width', value)]
+  })
+
   // Override `resolveThemeValue` with a version that is backwards compatible
   // with dot notation paths like `colors.red.500`. We could do this by default
   // in `resolveThemeValue` but handling it here keeps all backwards
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 6c6808e97e85..1e5c781c5faa 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -2861,6 +2861,75 @@ test('max-width', async () => {
   ).toEqual('')
 })
 
+test('max-w-screen', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --breakpoint-sm: 40rem;
+          --breakpoint-md: 48rem;
+          --breakpoint-lg: 64rem;
+          --breakpoint-xl: 80rem;
+          --breakpoint-2xl: 96rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'max-w-screen-sm',
+        'max-w-screen-md',
+        'max-w-screen-lg',
+        'max-w-screen-xl',
+        'max-w-screen-2xl',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root {
+      --breakpoint-sm: 40rem;
+      --breakpoint-md: 48rem;
+      --breakpoint-lg: 64rem;
+      --breakpoint-xl: 80rem;
+      --breakpoint-2xl: 96rem;
+    }
+
+    .max-w-screen-2xl {
+      max-width: var(--breakpoint-2xl);
+    }
+
+    .max-w-screen-lg {
+      max-width: var(--breakpoint-lg);
+    }
+
+    .max-w-screen-md {
+      max-width: var(--breakpoint-md);
+    }
+
+    .max-w-screen-sm {
+      max-width: var(--breakpoint-sm);
+    }
+
+    .max-w-screen-xl {
+      max-width: var(--breakpoint-xl);
+    }"
+  `)
+  expect(
+    await run([
+      'max-w-screen-oh',
+      'max-w-screen-4',
+      'max-w-screen-[4px]',
+      '-max-w-screen-sm',
+      '-max-w-screen-[4px]',
+      'max-w-screen-none/foo',
+      'max-w-screen-full/foo',
+      'max-w-screen-max/foo',
+      'max-w-screen-max/foo',
+      'max-w-screen-fit/foo',
+      'max-w-screen-4/foo',
+      'max-w-screen-xl/foo',
+      'max-w-screen-[4px]/foo',
+    ]),
+  ).toEqual('')
+})
+
 test('height', async () => {
   expect(
     await compileCss(

From 7eb454b691730995b0458c93d7de1b60396b2bf8 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Fri, 15 Nov 2024 17:24:40 +0100
Subject: [PATCH 2/7] Ensure it works with JS config overwrites

---
 packages/tailwindcss/src/compat/screens-config.test.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/tailwindcss/src/compat/screens-config.test.ts b/packages/tailwindcss/src/compat/screens-config.test.ts
index e280852a4814..983b22ea0f3a 100644
--- a/packages/tailwindcss/src/compat/screens-config.test.ts
+++ b/packages/tailwindcss/src/compat/screens-config.test.ts
@@ -41,6 +41,7 @@ test('CSS `--breakpoint-*` merge with JS config `screens`', async () => {
       'lg:flex',
       'min-sm:max-md:underline',
       'min-md:max-lg:underline',
+      'max-w-screen-sm',
       // Ensure other core variants appear at the end
       'print:items-end',
     ]),
@@ -51,6 +52,9 @@ test('CSS `--breakpoint-*` merge with JS config `screens`', async () => {
       --breakpoint-xl: 80rem;
       --breakpoint-2xl: 96rem;
     }
+    .max-w-screen-sm {
+      max-width: 44rem;
+    }
     .sm\\:flex {
       @media (width >= 44rem) {
         display: flex;

From e8a8c8ac5d4432070dc583746b9634c6592781e9 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Fri, 15 Nov 2024 17:34:15 +0100
Subject: [PATCH 3/7] add change log

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 26cbb8bf6c48..63ac7d300d57 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Bring back support for color opacity modifiers to read from `--opacity-*` theme values ([#14278](https://github.com/tailwindlabs/tailwindcss/pull/14278))
 
+### Added
+
+- Reintroduce `max-w-screen-*` utilities that read from the `--breakpoint` namespace ([#15013](https://github.com/tailwindlabs/tailwindcss/pull/15013))
+
 ## [4.0.0-alpha.34] - 2024-11-14
 
 ### Added

From d1abe4ea27784deaa723e0291749eb0252e9b028 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Fri, 15 Nov 2024 17:52:15 +0100
Subject: [PATCH 4/7] Move  utilities compat layer

---
 .../src/compat/apply-compat-hooks.ts          |  11 +-
 .../src/compat/legacy-utilities.test.ts       | 141 ++++++++++++++++++
 .../src/compat/legacy-utilities.ts            |  28 ++++
 packages/tailwindcss/src/utilities.test.ts    | 119 ---------------
 playgrounds/vite/src/app.tsx                  |   2 +-
 5 files changed, 173 insertions(+), 128 deletions(-)
 create mode 100644 packages/tailwindcss/src/compat/legacy-utilities.test.ts
 create mode 100644 packages/tailwindcss/src/compat/legacy-utilities.ts

diff --git a/packages/tailwindcss/src/compat/apply-compat-hooks.ts b/packages/tailwindcss/src/compat/apply-compat-hooks.ts
index 964f78a96fec..e53a253ee8be 100644
--- a/packages/tailwindcss/src/compat/apply-compat-hooks.ts
+++ b/packages/tailwindcss/src/compat/apply-compat-hooks.ts
@@ -1,4 +1,4 @@
-import { decl, styleRule, toCss, walk, WalkAction, type AstNode } from '../ast'
+import { styleRule, toCss, walk, WalkAction, type AstNode } from '../ast'
 import type { DesignSystem } from '../design-system'
 import { segment } from '../utils/segment'
 import { applyConfigToTheme } from './apply-config-to-theme'
@@ -8,6 +8,7 @@ import { resolveConfig } from './config/resolve-config'
 import type { UserConfig } from './config/types'
 import { registerContainerCompat } from './container'
 import { darkModePlugin } from './dark-mode'
+import { registerLegacyUtilities } from './legacy-utilities'
 import { buildPluginApi, type CssPluginOptions, type Plugin } from './plugin-api'
 import { registerScreensConfig } from './screens-config'
 import { registerThemeVariantOverrides } from './theme-variants'
@@ -116,13 +117,7 @@ export async function applyCompatibilityHooks({
     }
   })
 
-  designSystem.utilities.functional('max-w-screen', (candidate) => {
-    if (!candidate.value) return
-    if (candidate.value.kind === 'arbitrary') return
-    let value = designSystem.theme.resolve(candidate.value.value, ['--breakpoint'])
-    if (!value) return
-    return [decl('max-width', value)]
-  })
+  registerLegacyUtilities(designSystem)
 
   // Override `resolveThemeValue` with a version that is backwards compatible
   // with dot notation paths like `colors.red.500`. We could do this by default
diff --git a/packages/tailwindcss/src/compat/legacy-utilities.test.ts b/packages/tailwindcss/src/compat/legacy-utilities.test.ts
new file mode 100644
index 000000000000..d345cd865911
--- /dev/null
+++ b/packages/tailwindcss/src/compat/legacy-utilities.test.ts
@@ -0,0 +1,141 @@
+import { expect, test } from 'vitest'
+import { compileCss, run } from '../test-utils/run'
+
+const css = String.raw
+
+test('bg-gradient-*', async () => {
+  expect(
+    await compileCss(
+      css`
+        @tailwind utilities;
+      `,
+      [
+        'bg-gradient-to-t',
+        'bg-gradient-to-tr',
+        'bg-gradient-to-r',
+        'bg-gradient-to-br',
+        'bg-gradient-to-b',
+        'bg-gradient-to-bl',
+        'bg-gradient-to-l',
+        'bg-gradient-to-tl',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ".bg-gradient-to-b {
+      --tw-gradient-position: to bottom in oklch, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-gradient-to-bl {
+      --tw-gradient-position: to bottom left in oklch, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-gradient-to-br {
+      --tw-gradient-position: to bottom right in oklch, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-gradient-to-l {
+      --tw-gradient-position: to left in oklch, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-gradient-to-r {
+      --tw-gradient-position: to right in oklch, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-gradient-to-t {
+      --tw-gradient-position: to top in oklch, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-gradient-to-tl {
+      --tw-gradient-position: to top left in oklch, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-gradient-to-tr {
+      --tw-gradient-position: to top right in oklch, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }"
+  `)
+})
+
+test('max-w-screen', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --breakpoint-sm: 40rem;
+          --breakpoint-md: 48rem;
+          --breakpoint-lg: 64rem;
+          --breakpoint-xl: 80rem;
+          --breakpoint-2xl: 96rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'max-w-screen-sm',
+        'max-w-screen-md',
+        'max-w-screen-lg',
+        'max-w-screen-xl',
+        'max-w-screen-2xl',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root {
+      --breakpoint-sm: 40rem;
+      --breakpoint-md: 48rem;
+      --breakpoint-lg: 64rem;
+      --breakpoint-xl: 80rem;
+      --breakpoint-2xl: 96rem;
+    }
+
+    .max-w-screen-2xl {
+      max-width: var(--breakpoint-2xl);
+    }
+
+    .max-w-screen-lg {
+      max-width: var(--breakpoint-lg);
+    }
+
+    .max-w-screen-md {
+      max-width: var(--breakpoint-md);
+    }
+
+    .max-w-screen-sm {
+      max-width: var(--breakpoint-sm);
+    }
+
+    .max-w-screen-xl {
+      max-width: var(--breakpoint-xl);
+    }"
+  `)
+  expect(
+    await run([
+      'max-w-screen-oh',
+      'max-w-screen-4',
+      'max-w-screen-[4px]',
+      '-max-w-screen-sm',
+      '-max-w-screen-[4px]',
+      'max-w-screen-none/foo',
+      'max-w-screen-full/foo',
+      'max-w-screen-max/foo',
+      'max-w-screen-max/foo',
+      'max-w-screen-fit/foo',
+      'max-w-screen-4/foo',
+      'max-w-screen-xl/foo',
+      'max-w-screen-[4px]/foo',
+    ]),
+  ).toEqual('')
+})
diff --git a/packages/tailwindcss/src/compat/legacy-utilities.ts b/packages/tailwindcss/src/compat/legacy-utilities.ts
new file mode 100644
index 000000000000..082aff0fb96f
--- /dev/null
+++ b/packages/tailwindcss/src/compat/legacy-utilities.ts
@@ -0,0 +1,28 @@
+import { decl } from '../ast'
+import type { DesignSystem } from '../design-system'
+
+export function registerLegacyUtilities(designSystem: DesignSystem) {
+  for (let [value, direction] of [
+    ['t', 'top'],
+    ['tr', 'top right'],
+    ['r', 'right'],
+    ['br', 'bottom right'],
+    ['b', 'bottom'],
+    ['bl', 'bottom left'],
+    ['l', 'left'],
+    ['tl', 'top left'],
+  ]) {
+    designSystem.utilities.static(`bg-gradient-to-${value}`, () => [
+      decl('--tw-gradient-position', `to ${direction} in oklch,`),
+      decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
+    ])
+  }
+
+  designSystem.utilities.functional('max-w-screen', (candidate) => {
+    if (!candidate.value) return
+    if (candidate.value.kind === 'arbitrary') return
+    let value = designSystem.theme.resolve(candidate.value.value, ['--breakpoint'])
+    if (!value) return
+    return [decl('max-width', value)]
+  })
+}
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 1e5c781c5faa..8e79a3d28098 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -2861,75 +2861,6 @@ test('max-width', async () => {
   ).toEqual('')
 })
 
-test('max-w-screen', async () => {
-  expect(
-    await compileCss(
-      css`
-        @theme {
-          --breakpoint-sm: 40rem;
-          --breakpoint-md: 48rem;
-          --breakpoint-lg: 64rem;
-          --breakpoint-xl: 80rem;
-          --breakpoint-2xl: 96rem;
-        }
-        @tailwind utilities;
-      `,
-      [
-        'max-w-screen-sm',
-        'max-w-screen-md',
-        'max-w-screen-lg',
-        'max-w-screen-xl',
-        'max-w-screen-2xl',
-      ],
-    ),
-  ).toMatchInlineSnapshot(`
-    ":root {
-      --breakpoint-sm: 40rem;
-      --breakpoint-md: 48rem;
-      --breakpoint-lg: 64rem;
-      --breakpoint-xl: 80rem;
-      --breakpoint-2xl: 96rem;
-    }
-
-    .max-w-screen-2xl {
-      max-width: var(--breakpoint-2xl);
-    }
-
-    .max-w-screen-lg {
-      max-width: var(--breakpoint-lg);
-    }
-
-    .max-w-screen-md {
-      max-width: var(--breakpoint-md);
-    }
-
-    .max-w-screen-sm {
-      max-width: var(--breakpoint-sm);
-    }
-
-    .max-w-screen-xl {
-      max-width: var(--breakpoint-xl);
-    }"
-  `)
-  expect(
-    await run([
-      'max-w-screen-oh',
-      'max-w-screen-4',
-      'max-w-screen-[4px]',
-      '-max-w-screen-sm',
-      '-max-w-screen-[4px]',
-      'max-w-screen-none/foo',
-      'max-w-screen-full/foo',
-      'max-w-screen-max/foo',
-      'max-w-screen-max/foo',
-      'max-w-screen-fit/foo',
-      'max-w-screen-4/foo',
-      'max-w-screen-xl/foo',
-      'max-w-screen-[4px]/foo',
-    ]),
-  ).toEqual('')
-})
-
 test('height', async () => {
   expect(
     await compileCss(
@@ -10357,16 +10288,6 @@ test('bg', async () => {
         // background-image
         'bg-none',
 
-        // Legacy linear-gradient API
-        'bg-gradient-to-t',
-        'bg-gradient-to-tr',
-        'bg-gradient-to-r',
-        'bg-gradient-to-br',
-        'bg-gradient-to-b',
-        'bg-gradient-to-bl',
-        'bg-gradient-to-l',
-        'bg-gradient-to-tl',
-
         // Modern linear-gradient API
         'bg-linear-to-t',
         'bg-linear-to-tr',
@@ -10622,46 +10543,6 @@ test('bg', async () => {
       background-image: conic-gradient(var(--tw-gradient-stops));
     }
 
-    .bg-gradient-to-b {
-      --tw-gradient-position: to bottom in oklch, ;
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-gradient-to-bl {
-      --tw-gradient-position: to bottom left in oklch, ;
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-gradient-to-br {
-      --tw-gradient-position: to bottom right in oklch, ;
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-gradient-to-l {
-      --tw-gradient-position: to left in oklch, ;
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-gradient-to-r {
-      --tw-gradient-position: to right in oklch, ;
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-gradient-to-t {
-      --tw-gradient-position: to top in oklch, ;
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-gradient-to-tl {
-      --tw-gradient-position: to top left in oklch, ;
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .bg-gradient-to-tr {
-      --tw-gradient-position: to top right in oklch, ;
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
     .bg-linear-45 {
       --tw-gradient-position: 45deg in oklch, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
diff --git a/playgrounds/vite/src/app.tsx b/playgrounds/vite/src/app.tsx
index 4abc17cb52e1..4b0776c1fa34 100644
--- a/playgrounds/vite/src/app.tsx
+++ b/playgrounds/vite/src/app.tsx
@@ -1,6 +1,6 @@
 export function App() {
   return (
-    <div className="m-3 p-3 border">
+    <div className="m-3 p-3 border max-w-screen-sm">
       <h1 className="text-blue-500">Hello World</h1>
       <div className="-inset-x-full -inset-y-full -space-x-full -space-y-full -inset-full"></div>
     </div>

From e3ffab884528b16ef9c2472858d5c0b6a0d1ead2 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Fri, 15 Nov 2024 17:56:11 +0100
Subject: [PATCH 5/7] Revert playground change

---
 playgrounds/vite/src/app.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playgrounds/vite/src/app.tsx b/playgrounds/vite/src/app.tsx
index 4b0776c1fa34..4abc17cb52e1 100644
--- a/playgrounds/vite/src/app.tsx
+++ b/playgrounds/vite/src/app.tsx
@@ -1,6 +1,6 @@
 export function App() {
   return (
-    <div className="m-3 p-3 border max-w-screen-sm">
+    <div className="m-3 p-3 border">
       <h1 className="text-blue-500">Hello World</h1>
       <div className="-inset-x-full -inset-y-full -space-x-full -space-y-full -inset-full"></div>
     </div>

From 2bb66ff2766ab40145679cc1c7b41456b8ab2403 Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Sat, 16 Nov 2024 11:39:24 -0500
Subject: [PATCH 6/7] Don't duplicate deprecated utilities

---
 .../src/__snapshots__/intellisense.test.ts.snap |  8 --------
 .../src/compat/legacy-utilities.test.ts         |  8 --------
 packages/tailwindcss/src/utilities.ts           | 17 -----------------
 3 files changed, 33 deletions(-)

diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index 0f4b573651c0..a7a60326cd9e 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -1957,14 +1957,6 @@ exports[`getClassList 1`] = `
   "bg-current/95",
   "bg-current/100",
   "bg-fixed",
-  "bg-gradient-to-b",
-  "bg-gradient-to-bl",
-  "bg-gradient-to-br",
-  "bg-gradient-to-l",
-  "bg-gradient-to-r",
-  "bg-gradient-to-t",
-  "bg-gradient-to-tl",
-  "bg-gradient-to-tr",
   "bg-inherit",
   "bg-inherit/0",
   "bg-inherit/5",
diff --git a/packages/tailwindcss/src/compat/legacy-utilities.test.ts b/packages/tailwindcss/src/compat/legacy-utilities.test.ts
index d345cd865911..3dd367b90a7e 100644
--- a/packages/tailwindcss/src/compat/legacy-utilities.test.ts
+++ b/packages/tailwindcss/src/compat/legacy-utilities.test.ts
@@ -24,49 +24,41 @@ test('bg-gradient-*', async () => {
     ".bg-gradient-to-b {
       --tw-gradient-position: to bottom in oklch, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
-      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-bl {
       --tw-gradient-position: to bottom left in oklch, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
-      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-br {
       --tw-gradient-position: to bottom right in oklch, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
-      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-l {
       --tw-gradient-position: to left in oklch, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
-      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-r {
       --tw-gradient-position: to right in oklch, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
-      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-t {
       --tw-gradient-position: to top in oklch, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
-      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-tl {
       --tw-gradient-position: to top left in oklch, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
-      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-tr {
       --tw-gradient-position: to top right in oklch, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
-      background-image: linear-gradient(var(--tw-gradient-stops));
     }"
   `)
 })
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index b03b51074362..e149496d6eca 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2284,23 +2284,6 @@ export function createUtilities(theme: Theme) {
   staticUtility('bg-none', [['background-image', 'none']])
 
   {
-    // Deprecated
-    for (let [value, direction] of [
-      ['t', 'top'],
-      ['tr', 'top right'],
-      ['r', 'right'],
-      ['br', 'bottom right'],
-      ['b', 'bottom'],
-      ['bl', 'bottom left'],
-      ['l', 'left'],
-      ['tl', 'top left'],
-    ]) {
-      staticUtility(`bg-gradient-to-${value}`, [
-        ['--tw-gradient-position', `to ${direction} in oklch,`],
-        ['background-image', `linear-gradient(var(--tw-gradient-stops))`],
-      ])
-    }
-
     let suggestedModifiers = [
       'oklab',
       'oklch',

From 912c69eaf903d1c741e9f24aa0f314d5cc71bad8 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Sat, 16 Nov 2024 11:40:11 -0500
Subject: [PATCH 7/7] Update CHANGELOG.md

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 63ac7d300d57..4293705a7a18 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,7 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Reintroduce `max-w-screen-*` utilities that read from the `--breakpoint` namespace ([#15013](https://github.com/tailwindlabs/tailwindcss/pull/15013))
+- Reintroduce `max-w-screen-*` utilities that read from the `--breakpoint` namespace as deprecated utilities ([#15013](https://github.com/tailwindlabs/tailwindcss/pull/15013))
 
 ## [4.0.0-alpha.34] - 2024-11-14