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.

[philipp-spiess]

Hey! I agree that the previous caveat of raw media queries breaking some of the screen utilities wasn't great. In v4, however, we made the decision to not really recommend that pattern anymore. You are still able to use your old JavaScript config for backward compatibility but going forward we aren't documenting raw breakpoints anymore. Instead, if you want something like this, you can use @variant: https://tailwindcss.com/docs/functions-and-directives#variant-directive

This also means that the docs are hopefully less confusing in that regard. Thanks for the feedback though and sorry for the long turnaround. We've been really busy getting the v4 release ready and kinda missed responding to some of the GitHub issues during that time.

[mbforbes]

Hey Philipp, thanks so much for the reply!

Would you consider adding a height-based example to the @variant documentation for how to achieve this?

I used to think I could design everything only based on width breakpoints, but I've discovered for truly mobile-first, app-like experiences, I need to treat height breakpoints as a first-class citizen!

[philipp-spiess]

I meant @custom-variant, not @variant, my bad: https://tailwindcss.com/docs/functions-and-directives#custom-variant-directive

Should be able to adopt the pointer-coarse example pretty easily:

@custom-variant tall (@media (min-height: 900px));
@custom-variant max-tall (@media (max-height: 900px));

etc.