Extending screens config breaks arbitrary values

[stafyniaksacha]

What version of Tailwind CSS are you using?

v3.3.5

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

Vite 4

What version of Node.js are you using?

v18.0.0

What browser are you using?

Chrome, Safari, or N/A

What operating system are you using?

Windows / Linux

Reproduction URL

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

Describe your issue

When extending screens in tailwind configuration (using min/max or raw), it breaks arbitrary values:

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      screens: {
        '2xl': { min: '1536px' }, // fixed range breaks arbitrary values
        tall: { raw: '(min-height: 800px)' }, // raw breaks arbitrary values
      },
    },
  },
  plugins: [],
}

Makes this don't work:

<div class="min-[600px]:text-red-400  max-[600px]:text-sky-300">
  Test arbitray screen values
</div>

[wongjn]

Hi! Thank you for the report. This is a known limitation, see #9558 (comment) for details.

[adamwathan]

Yeah this is currently by design because we can't properly sort media queries and get the correct precedence behavior when applying the classes in your HTML when they are mixed like this, but I'm going to leave this open for a bit as a reminder to look into it again and sort of remember where the challenges were and see if we can't do something a bit better.

One idea is to group the media queries by "type" for sorting purposes and keep the min/max ones grouped with the regular min-width-based media queries for example. Could do the same thing for the mixed unit problem possibly — you'd get strange results but if they are deterministic perhaps that's all we need.

[joshuabaker]

@adamwathan I’m noticing that this also breaks when targeting breakpoints, not just for arbitrary values. It might be worth noting this alongside the custom media queries documentation.

Am I right in thinking that it’s not currently possible to do height-based (or other) media queries using Tailwind as well as being able to use either arbitrary width breakpoints and/or breakpoint targeting?

[wongjn]

Indeed as per #9558, any non-"simple" breakpoints will stop any max-* or min-* variants from working, which would in turn make targeting breakpoints not possible (in the form in the documentation).

It's possible to do height-based media queries using Tailwind as well as being able to use either arbitrary width breakpoints and/or breakpoint targeting. You could:

• Register height-based media queries in a Tailwind plugin.
• Use arbitrary variants like [@media(min-height:200px)]:text-red-500.

[joshuabaker]

@wongjn Big thank you for the guidance 🙏🏻

[RobinMalfait]

Hey!

Going to close this issue since this was by design in v3 and we likely won't change that behavior now that Tailwind CSS v4 is out. In Tailwind CSS v4 we did improve this behavior, essentially you define a value for each breakpoint (https://tailwindcss.com/docs/responsive-design#using-custom-breakpoints), there is no concept of min, max and raw breakpoints anymore.

Instead, the breakpoint name can be used as is (e.g.: sm:flex) or with a min-sm or max-sm prefix to turn it into a min-width or max-width breakpoint like in v3.

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

To solve the sorting, in Tailwind CSS v4 we sort each breakpoint by its unit (so all px-based breakpoints will be sorted, and all rem-based breakpoints will be sorted). We can't sort between px and rem values because the value of 1rem can change at runtime in the browser.

If this issue is still present for you, 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

Hope this helps!