Custom breakpoints don't work unless specified with same units as default

[sippeangelo]

What version of Tailwind CSS are you using?

v4.0.5

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

@tailwindcss/postcss 4.1.5

What version of Node.js are you using?

For example: v16.0.0

What browser are you using?

Firefox

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/6KFqtQPzUW

Observe that the colour of the container is blue, and not yellow, as expected.

Describe your issue

When creating custom breakpoints to extend the existing breakpoints, the generated classes don't take proper precedence over the default ones if using different units than rem.

I had added --breakpoint-3x: 1920px and --breakpoint-4xl: 2560px;, but the default breakpoint of 2xl seems to always take precedence over them. It seems like postcss generates them in the order of unit size, but does not take differing units into account. This is a regression from Tailwind 3, where this used to work.

[wongjn]

You still have the same problem in v3 - except the breakpoint units all need to be px. Hence why it seems like a regression, but really, the underlying logic of needing all the units the same was still present.

If you want to use px, you can replace all the breakpoints to use px and it should work. The key is to ensure everything uses the same unit, as per the documentation:

Note that it's important to always use the same unit for defining your breakpoints or the generated utilities may be sorted in an unexpected order, causing breakpoint classes to override each other in unexpected ways.

Tailwind uses rem for the default breakpoints, so if you are adding additional breakpoints to the defaults, make sure you use rem as well.