Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
curtisburns opened this issue Feb 25, 2024 · 6 comments

Comments

@curtisburns
Copy link

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
Copy link
Author

curtisburns commented Feb 25, 2024

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
Copy link
Member

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
Copy link

mathrick commented Mar 1, 2024

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
Copy link

verekia commented Mar 19, 2024

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
Copy link

illiaChaban commented May 28, 2024

+ 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
Copy link

searls commented Jun 21, 2024

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants