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:

• extending screens with raw fails max-* screens properties tailwindcss#11698
• Add new min and max variants tailwindcss#9558 (comment)

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!

[maxtispro]

I got the exact same issue: I wanted to add custom vertical media queries to help resize and position decorative elements on phone and tablet screens that switch between portrait and landscape mode. As a result, I can't use max-lg or any of the max-* breakpoints to hide desktop elements on mobile devices.

For the time being I will resort to re-implementing the default max-* breakpoints but it would be nice to not have to do this.