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.

[illiaChaban]

+ 1 to improve documentation or show some kind of warning or error on compile if this is not supported. Otherwise, it silently breaks many styles

[searls]

Like @mathrick I wound up here after seeing the example in the docs that used raw in combination with min-height:

https://play.tailwindcss.com/3n98EXEVKG?size=464x720&file=config

I appreciate @verekia's workaround, though!

[RobinMalfait]

Hey!

Going to close this issue now that Tailwind CSS v4 is out where we improved this behavior.

Instead of defining the type of breakpoint you want (min, max, raw), you can define the value itself. This in turn will expose min-* and max-* breakpoints. E.g.:

@theme {
  --breakpoint-foo: 1234px;
}

This will give you a foo:, min-foo: and max-foo: breakpoint. E.g.: https://play.tailwindcss.com/hBF3JzNHLW

.max-foo\:flex {
  @media (width < 1234px) {
    display: flex;
  }
}
.foo\:flex {
  @media (width >= 1234px) {
    display: flex;
  }
}
.min-foo\:flex {
  @media (width >= 1234px) {
    display: flex;
  }
}

For raw breakpoints (or height related breakpoints), you should create a new variant entirely. E.g.: https://tailwindcss.com/docs/hover-focus-and-other-states#registering-a-custom-variant

I would recommend to try and upgrade to Tailwind CSS v4. You can find the upgrade guide here: https://tailwindcss.com/docs/upgrade-guide

We also have a CLI tool that can help with upgrading your project(s): https://tailwindcss.com/docs/upgrade-guide#using-the-upgrade-tool

If you can't migrate to Tailwind CSS v4, I would recommend to create an entirely new variant for the raw variant which should solve this issue as well.

Side note: the variant in question (has-hover) is how the hover variant in Tailwind CSS v4 works out of the box.
E.g.:
hover:flex will produce:

@media (hover: hover) {
  .hover\:flex:hover {
    display: flex;
  }
}

So you might not need this exact variant anymore.

Hope this helps!