Bring back max-w-screen-* utilities

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 as deprecated utilities ([#15013](https://github.com/tailwindlabs/tailwindcss/pull/15013))
+
 ## [4.0.0-alpha.34] - 2024-11-14
 
 ### Added

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",

packages/tailwindcss/src/compat/apply-compat-hooks.ts

@@ -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,6 +117,8 @@ export async function applyCompatibilityHooks({
     }
   })
 
+  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
   // in `resolveThemeValue` but handling it here keeps all backwards

packages/tailwindcss/src/compat/legacy-utilities.test.ts

@@ -0,0 +1,133 @@
+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));
+    }
+
+    .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));
+    }"
+  `)
+})
+
+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('')
+})

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)]
+  })
+}

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;

packages/tailwindcss/src/utilities.test.ts

@@ -10288,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',
@@ -10553,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));

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',