What is the official v4 way to do the v3 max-w-screen-*

[foxtrotcz]

Hello,
in Tailwind v3 to set max width of element to some breakpoint value, you would use max-w-screen-*
For example max-w-screen-lg for max width of 1024px.

And I wonder what is the recommended way to achieve the same results in v4.
Currently I use: max-w-(--breakpoint-lg) which achieves the same thing.

But I am not sure if this is considered workaround because it uses CSS variable and if there is any more "official" way to do it.
I was thinking for example direct class like max-w-breakpoint-lg which would be similar to the old max-w-screen-lg but I cant find anything like that.

So what is the current correct way to do this?
Thanks.

[wongjn]

I see nothing wrong with using max-w-(--breakpoint-lg). Though, if you want to use something like max-w-screen-lg, you can set up those theme tokens in @theme like:

@theme {
  --max-width-screen-lg: var(--breakpoint-lg);
}

[ryanportfolio]

max-w-(--breakpoint-lg) is not a workaround, it's intended

--breakpoint-* are theme variables emitted to :root, and max-w-(--some-var) is the documented syntax for pulling a theme variable into a utility (no built-in max-w-breakpoint-* class in v4)

The @theme snippet from wongjn works

also the docs recommend @theme inline when a theme variable references another variable, and bare max-w-screen already exists in v4 meaning max-width: 100vw

[zaman1100]

max-w-screen-* was removed in Tailwind CSS v4. The recommended replacement is to use the breakpoint CSS variables:

This is the official v4 approach, not a workaround. There is currently no max-w-breakpoint-lg utility.