Why not working {min-,max-,}w-screen-{breakpoint} following the pattern of {min-,max-,}w-{container_breakpoint}

[rozsazoltan]

I keep seeing examples using .max-w-screen-xl and it actually works in Tailwind CSS v4, though can't find the class in the documentation anywhere. (question from rzcommader)

• https://tailwindcss.com/docs/max-width#using-the-container-scale

I'm more interested in why, if max-w-screen-lg works, w-screen-lg doesn't produce any result.
At the same time, the example given in the docs uses max-w-lg (the same as max-w-screen-lg, but container-specific), and w-lg (also container-specific) works.
Even with the min-* prefix, only the container-specific min-w-lg works - min-w-screen-lg does not.

• https://play.tailwindcss.com/qMDDQ2iWmq?size=1200x720

But since the behavior with max-w-screen-lg is undocumented, the question is only hypothetical.

The feature can currently be used with variables (w-(--breakpoint-lg)), but this makes the behavior of max-w-screen-{breakpoint} feel inconsistent. Since based on how the syntax works, I would expect it to work both with the min- or without prefix.

• https://play.tailwindcss.com/nuv7YpbPFq?size=1200x720

<div class="w-lg bg-sky-400">...</div>
<div class="w-32 min-w-lg  bg-sky-500">...</div>
<div class="w-999 max-w-lg  bg-sky-600">...</div>

<div class="w-screen-lg bg-orange-400">... (not working)</div>
<div class="w-32 min-w-screen-lg bg-orange-500">... (not working)</div>
<div class="w-999 max-w-screen-lg bg-orange-600">...</div>

<div class="w-(--breakpoint-lg) bg-emerald-400">...</div>
<div class="w-32 min-w-(--breakpoint-lg) bg-emerald-500">...</div>
<div class="w-999 max-w-(--breakpoint-lg) bg-emerald-600">...</div>

[rozsazoltan]

• tailwindcss/CHANGELOG.md

  Line 687 in 4d37043

  - Reintroduce `max-w-screen-*` utilities that read from the `--breakpoint` namespace as deprecated utilities ([#15013](https://github.com/tailwindlabs/tailwindcss/pull/15013))

• Bring back max-w-screen-* utilities #15013

Bring back max-w-screen-* utilities

Since these utilities are only added back for compatibility reasons, it's put into the compatibility layer.

Also, lets not forget that we can access the variables directly anyway, e.g., max-w-(--breakpoint-lg) or w-(--breakpoint-lg), because in reality, that's all that's happening behind the scenes with max-w-screen-lg as well.

For containers
<div class="w-lg bg-sky-400">...</div>
<div class="w-32 min-w-lg  bg-sky-500">...</div>
<div class="w-999 max-w-lg  bg-sky-600">...</div>

For screen breakpoints
<div class="w-(--breakpoint-lg) bg-emerald-400">...</div>
<div class="w-32 min-w-(--breakpoint-lg)  bg-emerald-500">...</div>
<div class="w-999 max-w-(--breakpoint-lg)  bg-emerald-600">...</div>

[rozsazoltan]

Personal observation: In v3, breakpoints had to be defined under the screens key in the JS-based configuration. In v4, this has been removed, and breakpoints are now placed under the --breakpoint-* namespace. This, along with the easier access to variables (e.g., max-w-(--variable)), likely led to the removal of max-w-screen-.... w-screen-... and min-w-screen-... didn't exist even in v3.

[rozsazoltan]

For your own purposes, you can define custom functional utilities, allowing you to introduce the missing w-screen-{breakpoint} and min-w-screen-{breakpoint} utilities:

• https://play.tailwindcss.com/b2QLEjZi36?size=1200x720&file=css

@utility w-screen-* {
  width: --value(--breakpoint-*);
}

@utility min-w-screen-* {
  min-width: --value(--breakpoint-*);
}

/*
https://github.com/tailwindlabs/tailwindcss/pull/15013
@utility max-w-screen-* {
  max-width: --value(--breakpoint-*);
}
*/