Document Custom media queries breaks all `max-*` modifiers

[mbforbes]

Hi there — first off, thanks so much for the Tailwind project.

I recently noticed that all of my max-sm breakpoints are broken and I couldn't figure out why. Then I discovered all max-* modifiers in my project are broken.

Because I'm designing for content (a game) that must fit all on a screen, I added a "tall" screen in my config, as seen in the Custom media queries documentation:

   theme: {
      extend: {
         screens: {
            tall: { raw: "(min-height: 900px)" },
         },
      ...
      }
   }

What I couldn't find documented there is that doing so silently breaks all ability to Target a breakpoint range and Target a single breakpoint globally for all screen sizes, including the builtin ones.

To figure this out, I eventually found:

• https://github.com/tailwindlabs/tailwindcss/issues/11698
• https://github.com/tailwindlabs/tailwindcss/pull/9558#restrictions

My suggestion: If the Customizing Screens documentation page could please mention the restrictions listed in that PR, or minimally link to it, it would have saved me a lot of confusion, and accidentally breaking many of my layouts.

Many thanks for your consideration!