[v4] add max-w-screen-* support

[francoismassart]

Quick & simple MR that fixes
[v4] max-w-screen-* utilities are not provided by default #13267

[adamwathan]

Hey thanks for the PR! We left this one out on purpose for now as I think we'd only include it for backwards compatibility reasons, and need to decide if we actually want to include it or would rather just tell people to throw this in their CSS file as part of upgrading:

@theme {
  --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);
}

Since we're moving away from the "screen" terminology for v4 I don't really want to ship --width-screen-* variables out of the box.

So going to hold off on this one for now, but will make a decision about how to handle this before the final release. Focusing purely on backwards compatibility stuff in May/June, so deliberately left this out until then 👍

Thanks regardless!

[aaronadamsCA]

I find it's easy enough to reference the breakpoint as a custom property, but you might want to consider simplifying this by the time you ship v4:

- <div class="max-w-[--breakpoint-sm]">
+ <div class="max-w-breakpoint-sm">

This would make for a very simple s/w-screen-/w-breakpoint- string substitution during the v4 upgrade.

[brandonmcconnell]

@aaronadamsCA fyi in v4, it will be max-w-[var(--breakpoint-sm)] as the shorthand arbitrary variable syntax will no longer be supported.

property-[--var-ref] ➞ property-[var(--var-ref)]

Related:

• Remove automatic var(…) injection #13537
• Remove automatic var(…) injection #13657
• Disable automatic var() injection for anchor properties #13826

---

I would also like to see some sort of shorthand for referencing screen sizes, maybe using the new v4 breakpoint terminology:

w-breakpoint-sm     or    w-bp-sm
w-breakpoint-md     or    w-bp-md
w-breakpoint-lg     or    w-bp-lg
w-breakpoint-xl     or    w-bp-xl
w-breakpoint-2xl    or    w-bp-2xl

I would prefer the more verbose max-w-breakpoint-sm naming personally, which @aaronadamsCA also pointed out as a possibility, as the cases where this is needed are rare, so it would help to more quickly recognize breakpoint thajn something abbreviated like bp. Although, if these are used rarely enough, perhaps max-w-[var(--breakpoint-sm)] isn't so bad.

I'm deadlocking myself here lol

[aaronadamsCA]

@brandonmcconnell, thanks a ton for that note, I'll need to watch the release notes for that change.

@adamwathan, maybe the real ask here is a better, simpler v4 container utility. The v3 utility was for one very specific use case, whereas I could imagine v4 utilities that are both a lot simpler and a lot more like the rest of Tailwind:

.container-sm {
  width: 100%;
  max-width: var(--breakpoint-sm);
}

.container-md {
  width: 100%;
  max-width: var(--breakpoint-md);
}

/* etc. */

Users could easily recreate the v3 container utility themselves, including all of its configuration options:

@utility container {
  /* Set the `max-width` to match the `min-width` of the current breakpoint */
  @apply sm:container-sm md:container-md lg:container-lg xl:container-xl 2xl:container-2xl;

  /* Center by default */
  @apply mx-auto;

  /* Add horizontal padding */
  @apply px-4 sm:px-8;
}

Maybe you've already got something better in mind. If not I think this could be a nice addition that's more flexible and less complex/weird than v3.