max-w-screen-xl not working when setting max in breakpoints ?

[DavidSvi]

HI there, I have followed the tutorial on this page to config tailwind to go for desktop-first approach

https://tailwindcss.com/docs/screens

my config file is:

module.exports = {
	darkMode: 'class',
	theme: {
		extend: {},
		
	        screens: {					
                   'xl' : {'max':'250px'}
    	        },
	},
	
	
	plugins: [],
	corePlugins: {
	},
	  
 
}

I am setting max for multiple breakpoints, when I try to add max-w-screen-xl in the CSS

.class { @apply mx-auto max-w-screen-xl }

I get this message: The max-w-screen-xl class does not exist. If max-w-screen-xl is a custom class, make sure it is defined within a @layer directive.

However, if I removed max from the config file I get no error and it works well.

How can I resolve this issue ?

Thank you

Tailwind Play: https://play.tailwindcss.com/eYgfJfxmUV?file=config

[wongjn]

The max-w-screen-* are only generated for screens values that are strings. So if you want max-w-screen-xl, you will need to rewrite your xl screen so it is a string value (and thus a min-width media query) or create a different screen key that works for your needs.

[ornakash]

I tried that but it doesn't work unfortunately.. do you have anther solution maybe?

[wongjn]

What doesn't work for you? Which class are you trying to use?

[ornakash]

@wongjn thanks for the response!

I have this "tall" screen, once I put it,
I can't use max-md, max-lg, etc. They seem to not work anymore

for instance:
className="max-md:pt-8 pt-3" used to work but when I add the "tall" screen, it doesn't work anymore

[wongjn]

When you have screens values that are no longer string-only values, the max-* and min-* variants no longer exist, see #9558.

[ornakash]

Same issue here