Adding non-pixel media queries to screens config prevents auto-generated max-* classes for the rest of the breakpoints

[curtisburns]

What version of Tailwind CSS are you using?

v3.3.3

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

Next.js 13.5.4

What version of Node.js are you using?

v18.16.0

What browser are you using?

All

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/hzEFzrG4NO

Describe your issue

module.exports = {
  theme: {
    extend: {
      screens: {
        // => @media (min-width: 400px) { ... }
        sm: '400px',
        // => @media (min-width: 612px) { ... }
        md: '612px',
        // => @media (min-width: 768px) { ... }
        lg: '768px',
        // => @media (min-width: 1024px) { ... }
        xl: '1024px',
        // Comment out this line to see max-* class work again.
       'has-hover': { raw: '(hover: hover)' },
      },
    },
  },
  variants: {},
  plugins: [],
}

As title says, any additional media queries such as hover:hover or min-aspect-ratio: 1 will prevent the auto-generation of the max-* classes, which makes sense as you can't have a max hover, but I feel they should still generate for those where it applies, or we should at least get a warning when generated unsuccessfully. This leads to styling not being applied for max breakpoints, and no way for the dev to know unless it's visually noticeable in the browser.

As I had trouble figuring out where the max-* classes were defined while trying to identify the bug, once I remembered that they were auto-generated (tucked away in the docs here), I just explicitly defined these in the config as well. It's easier, then, to trace for any other devs unfamiliar with TW.

{
  sm: '400px',
  md: '612px',
  lg: '768px',
  xl: '1024px',

  'max-sm': { max: '399px'},
  'max-md':  { max: '611px'},
  'max-lg':  { max: '767px'},
  'max-xl':  { max: '1023px'},

  // This now has no impact on the max-* classes as we define them above
  'has-hover': { raw: '(hover: hover)' },
}

Is this the expected behaviour? Should there be more notice when the max-* classes aren't successfully generated? Should docs surrounding the max-* classes be easier to find, or added to the screens section? Quick search is no help, unfortunately.

Thanks!

[curtisburns]

Have just seen this - #9558 (comment)

This should be added to the docs, it would save a lot of people a good few hours to eventually stumble across this caveat.

[adamwathan]

Yeah I really thought this was documented but will make a note to update the docs 👍

For what it's worth I'd use a totally custom variant for your example and keep screens focused to just breakpoints:

https://play.tailwindcss.com/m29hlgZJSc?file=config

[mathrick]

This restriction effectively means it's impossible to have a height-based breakpoint. Since heights require the use of the 'mybreakpoint': {'raw': '(min-height: 123px)'}, they will always conflict with max-* breakpoints.

[verekia]

Here is a workaround:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      screens: {
        'max-sm': { raw: `not all and (min-width: ${defaultTheme.screens.sm})` },
        'max-md': { raw: `not all and (min-width: ${defaultTheme.screens.md})` },
        'max-lg': { raw: `not all and (min-width: ${defaultTheme.screens.lg})` },
        'max-xl': { raw: `not all and (min-width: ${defaultTheme.screens.xl})` },
        'max-2xl': { raw: `not all and (min-width: ${defaultTheme.screens['2xl']})` },

        // You can now have your custom media queries and still use max-* ranges.
        tall: { raw: '(min-height: 800px)' },
      },
    },
  },
}

The not all and is what Tailwind normally generates for those classes.