Breakpoint sequence off for pixel values

[scheinercc]

What version of Tailwind CSS are you using?

For example: v4.1.8

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

postcss-cli 11.0.1

What version of Node.js are you using?

v22.14.0

What browser are you using?

Firefox Dev, Chrome

What operating system are you using?

macOS

Reproduction URL

A Tailwind Play link: https://play.tailwindcss.com/JwD8bUESaW
In the root <div> I added sm:w-100 min-[45rem]:w-200 min-[800px]:w-300.

Describe your issue

Based on the browsers' default 16px for 1rem, the sm selector should be first in the generated file, the min-[45rem] second, and min-[800px] last.

You can see in the screenshot that this is not the case, and the pixel value comes first.

Here are examples from a project.

lg: vs min-[1665px]

lg: vs min-[104rem]

Both should be in the same sequence.

In order to get the media queries into the correct sequence, the pixel values need to be changed into their corresponding rem values.

FYI, the example in the docs for arbitrary values uses px values, which indicates they should play nicely together: https://tailwindcss.com/docs/responsive-design#using-arbitrary-values

[wongjn]

So for breakpoints to work properly, you need to use the same units. So, if you're using built-in breakpoints alongside, you should use rem all the way. If you notice in the documentation example you linked, all the breakpoints use the same px unit.

[scheinercc]

Yeap. I got that from testing.

I don't think it is obvious, though, especially since there is no hint that you can't mix built-ins with px values. In the documentation under "There are five breakpoints by default, inspired by common device resolutions:" the "Minimum width" values are also in rem and px, which IMO suggests that additional abitrary values can be used in either.

Also, it does not seem to have been the same in v3.
I came across this during an upgrade to v4, when weird issues started to arise.

I think it would make more sense to sort mixed px and rem values using a default rem value of 16px, as per the "Minimum width" values mentioned above.

If this is not worth persuing, the "arbitrary values" example in the documentation might be a good place to add a note about this. Maybe something along the line of:

"Mixed values of rem and px will not be sorted in an predicatble order. If you are using built-in break points only use rem for any arbitrary values. Like max-[37.5rem]:bg-sky-300 etc."