Add custom breakpoints for screens in extend, resulting in the failure of max-*.

[H-Sven]

What version of Tailwind CSS are you using?

"@nuxtjs/tailwindcss": "^6.12.2"

What build tool (or framework if it abstracts the build tool) are you using?

"nuxt": "^3.15.1"

What version of Node.js are you using?

v20.15.0

What browser are you using?

Chrome / Edge

What operating system are you using?

macOS

Reproduction URL

module.exports = {
  theme: {
    extend: {
      screens: {
        'max-lg-inclusive': { 'max': '1024px' },
      },
    },
  },
};

<div
        class="max-lg-inclusive:w-[40rem] relative max-w-[75rem] max-lg:w-[55rem] lg:w-[56rem] xl:w-[75rem]"
      >
</div>

Describe your issue

After configuring like this, max-lg-inclusive:w-[40rem] runs normally, but max-lg:w-[55rem] loses its effect. It does not generate CSS code as expected.

And in VSCode, the Tailwind CSS IntelliSense plugin does not generate prompts like other breakpoints.

[wongjn]

See #9558.

[philipp-spiess]

As Justin said, this is a limitation of how those min-… and max-… utilities are built. We recommend that you define your breakpoints in with minimum breakpoints instead.