extending screens with raw fails max-* screens properties

[yunuli]

@RobinMalfait
I've found why max-* fails.
overrides default only cause the missing key fails, like missing 'sm' only make 'max-sm' fails
it is by extending with raw, make all the max-* fails

module.exports = {
  theme: {
    extend: {
      screens: {
        tall: { raw: '(min-height: 800px)' },
        laptop: '1024px',
      },
    },
  },
  plugins: [],
}

Originally posted by @yunuli in #11685 (reply in thread)

[thecrypticace]

Hey! This one is by design. Essentially, we can't handle automatic sorting and cannot handle inversion (to create the max variants) of the media query under these circumstances.

See #9558 (comment) for a list of restrictions on when and how the min/max variants work.

[letehaha]

@thecrypticace I strongly believe that this kind of info should be described in the official documentation better. I just spent a few hours just to reach your comment. I also asked a bunch of people who actively using Tailwind and no one knew about these restrictions. That means it's not well-known by the common users. Can this #9558 (comment) comment be added as a link to Targeting a breakpoint range section in the documentation? I can open a PR if that makes sense

[Elastoman]

I agree that this information should be added to the documentation. Took me hours to find out the hard way. Anyhow, keep up the good work and thx!