Warning when max/min variants are used with custom media query screens

[cjpearson]

What version of Tailwind CSS are you using?

v3.2.7

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

tailwindcss CLI

What version of Node.js are you using?

v16.17

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction URL

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

Describe your issue

When the theme is extended with additional non-string screen breakpoints, the min- and max- breakpoints no longer function. It looks like there's a warning for this case, but it doesn't seem to be triggered.

[thecrypticace]

Hey! So, this exact situation is something we discussed when implementing the min/max screen variants when building v3.2. We knew that warnings were needed for better DX — specifically because of how we need to sort these relative to other screen sizes in your config. These warnings show up when one of the “rules” for using min/max variants is broken (see restrictions from PR #9558).

The reason that they don’t show up in this case, for max-lg, is that we empty out the predefined values list for the min and max variants — meaning the variant max-lg never exists. And, since it doesn’t technically exist, no utilities are matched and we don’t run the variant function. This is why you don’t see a warning.

We chose this tradeoff to ensure that Tailwind CSS Intellisense would not provide nonsense completions for variants that are not generated in the first place. There would be no reason to provide completions for max-lg:underline when max-lg ends up generating no output CSS. The presence of the variant would also affect the prettier plugin’s class sorting as well even though those utilities do not actually exist in your CSS.

I’ll note that any use of an arbitrary value, e.g. max-[300px]:underline, will still show a warning because arbitrary values always invoke the function to know what to generate. For instance, you could register a variant that only provides selectors when given values between 213px and 605px if you wanted (though I wouldn’t recommend it :D) and we can’t know that ahead of time.

We absolutely recognize that this does not provide an optimal DX and it is something we intend to improve. However, at the moment, doing so correctly would require a good bit of brainstorming as well as coordinated changes across multiple projects which is why we opted for what we do today and only warn for arbitrary values.

Hope that helps! ✨

[priya-jain-dingg]

Hey! I am facing some issues related to tailwind. If I use any arbitrary values like [100px] its working in dev environment. But break when I create build and run start.
I am using tailwind 3.3.2 version in NextJS 13.
Please help if any idea what I am doing wrong.

[Muetze42]

The problem only happened to me when I use REM instead of PX.