[V4] breakpoint CSS using (width <= ... ) or max-width

[gnat]

In v3 we could do something like this to get max breakpoints.

tailwind.config = {
	theme: {
		extend: {
			screens: {
				'xl-': { max: "1535px" },
				'lg-': { max: "1279px" },
				'md-': { max: "1023px" },
				'sm-': { max: "767px" },
				'xs-': { max: "639px" },
			}
		}
	}
}

In v4 how do you define width <= ... or max-width: breakpoints using the new CSS system?

@theme { --breakpoint-*: ... }

Do we perhaps need a --breakpoint-*-max: ?

Thanks!

[AidenJastrzembski]

[wongjn]

This won't work as you can't use CSS variables in media queries.

[adamwathan]

In v4 we've removed support for making breakpoints max-width by default to keep things simple, and instead encourage people to use the max-* variants, like max-sm:hidden.

[paShaman]

return please opportunity to use desktop first breakpoints