Running the upgrade tool @tailwindcss/upgrade@next replaces max-w-screen-xl with max-w-(--breakpoint-xl)

[richarddrum]

I'm wondering if this is intentional?

seems like it could be a bug from implementing this (from documentation):

For cases where you still need to use the theme() function (like in media queries where CSS variables aren't supported), you should use the CSS variable name instead of the old dot notation:

CSS
@media (width >= theme(screens.xl)) {
@media (width >= theme(--breakpoint-xl)) {
  /* ... */
}

otherwise tool was very effective. Thank you!

[wongjn]

As per #13395 (comment), the max-w-screen-* utilities are deprecated, hence why the upgrade tool converts them to use max-w-(--breakpoint-*) instead.

[wongjn]

thank you for the response... I see now.
Sorry for my ignorance but why isn't it replaced with max-w-[var(--breakpoint-*)]

max-w-(--breakpoint-*) is shorter