[v4] max-w-screen-* utilities are not provided by default

[zoomoid]

What version of Tailwind CSS are you using?

v4.0.0-alpha.9

What build tool (or framework if it abstracts the build tool) are you using?

@tailwindcss/postcss 4.0.0-alpha.9, Next.js 14.1.3

What version of Node.js are you using?

v20.11.0

What browser are you using?

Chrome, Firefox, Safari

What operating system are you using?

macOS

Reproduction URL

Clone the NextJS repo at https://github.com/zoomoid/tailwindcss-4-experiments and run the project in missing-screen-widths. Observe that the first <div> using max-w-md works as intended, whereas the second <div> using max-w-screen-md (which worked fine in < 4.0.0) has no utility for its max-width.

Describe your issue

max-w-screen-* utilities for using the breakpoints as max-widths are currently not included in the set of widths in packages/tailwindcss/theme.css. Afaik those aren't noted as being deprecated.

You can add them via the @theme directive by adding

--width-screen-sm: var(--breakpoint-sm);
--width-screen-md: var(--breakpoint-md);
--width-screen-lg: var(--breakpoint-lg);
--width-screen-xl: var(--breakpoint-xl);
--width-screen-2xl: var(--breakpoint-2xl);

or for any additional breakpoints created by yourself following the same schema. Afterwards, max-w-screen-* will work as expected again.

[zoomoid]

Closing this as #13395 is closed