Arbitrary responsive screen values not working with custom screen values

[treb00]

What version of Tailwind CSS are you using?

v3.2.1

What build tool (or framework if it abstracts the build tool) are you using?

Tailwind play

What version of Node.js are you using?

Tailwind play

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

Tailwind play

Describe your issue

The arbitrary responsive screen values (example: max-[1000px]:flex-col) not working if at least one screen value is added in tailwind config, either in the theme.screens or theme.extend.screens. If you try to remove that one screen value in the provided example, it works again.

If you make a custom screen like:
screens: { sm: '500px' }
it still works. However, if you do this:
screens: { sm: { max: '500px' } }
it stops working.

[thecrypticace]

The min and max variants are disabled for screen configurations when objects are present. You will also notice that max-sm:*, max-md:*, etc… don't generate anything. This is an intentional design limitation for now. This is discussed in the description of #9558 in the "restrictions" section. The tl;dr is we did this for simplicity and predictability.

We also issue a warning in the console for the arbitrary value case. We do not in the case of pre-configured screens because we would end up adding invalid suggestions to Intellisense (because we would say we explicitly support a value only to then not generate anything for it). This warning is surfaced in the browser console for Play and the CDN and the terminal for Node: