[v4] Wrong specificity of media query with a custom breakpoint value

[mr-wildcard]

What version of Tailwind CSS are you using?

v4.0.7

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

@tailwindcss/cli v4.0.7

What version of Node.js are you using?

v22.14.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

$ git clone git@github.com:mr-wildcard/tailwindcss-v4-bug-ordered-custom-breakpoint-value.git
$ cd tailwindcss-v4-bug-ordered-custom-breakpoint-value
$ npm i
$ npx @tailwindcss/cli -i ./input.css -o ./output.css

Describe your issue

If we customize the value of a breakpoint using px unit:

@theme {
    --breakpoint-2xl: 1600px;
}

the generated media query for that specific breakpoint end up before the other media queries using rem:

This is problematic in case we provide a value that is wider than the other breakpoints using rem: in that case we expect the 2xl variant styles to be applied last but they've in fact less specificity than the other media queries:

---

I believe that the unit of the value is also sorted because if I use the vh unit, the generated media query is placed at the end, but if I use ch unit, it's placed before.

Not sure if that's really an issue and how it could be fixed, but I think that we can quickly fall into this kind of trap and lose hours debugging.
Maybe add a warning in the documentation?

[AntonioVentilii]

It happened to me too: my custom breakpoints work in rem but not in px

[philipp-spiess]

Hey! thanks for the feedback and glad you found out how the sorting works but yeah it only compares breakpoint values within the same units. I think you're right we should mention that in the docs, so I'm keeping this issue open so we don't forget.