customized screen does not generate max-* modifier

[yunuli]

What version of Tailwind CSS are you using?

For example: v2.0.4
tailwind 3.3.2
nextjs 13.4.6
nodejs 18.16.1
chrome
macos
in doc https://tailwindcss.com/docs/responsive-design , it reads:
Tailwind generates a corresponding max-* modifier for each breakpoint

however, if i customize screens, then max-* is not available, only customized screens is available

[RobinMalfait]

Hey!

Make sure that you are adding new values using extend, otherwise you are overriding all the screen values: https://play.tailwindcss.com/ypcZnLNkWR?file=config

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: { // This will ensure the new `laptop` screen is added
      screens: {
        'laptop': '1024px',
      }
    },
  },
  plugins: [],
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: { // Without `extend`, this will override _all_ screens
      'laptop': '1024px',
    },
  },
  plugins: [],
}

[yunuli]

it works by using extend.
so the Using custom screen names section is somehow misleading, since it leads to override defaults

[yunuli]

@RobinMalfait
hi，Robin， 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: [],
}