[v4] Custom breakpoints paddings are not respected

[zommerberg]

When we have a following class:

px-4 lg:px-6 3xl:px-20

The 3xl breakpoint will NOT be respected, instead the lg breakpoint will get the priority, even thought it should use the 3xl breakpoint.

NOTE: this happens only for padding, it seems fine for background colors.

With the following theme config:

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

As a workaround i have to specify that 3xl should take priority with the "!" sign:

px-4 lg:px-6 3xl:px-20!

What version of Tailwind CSS are you using?

^4.0.0-beta.8

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

Nextjs 15.1

What version of Node.js are you using?

22

What browser are you using?

Edge

What operating system are you using?

Windows

Reproduction URL
https://play.tailwindcss.com/1tQGhhPGfR

Describe your issue

Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead.

[philipp-spiess]

Hey! We're sorting by the breakpoint value when generating these classes, the issue you're seeing is because you're adding a px value where as the default breakpoints are configured in rem instead. This means the values can't be sorted correctly anymore because of the unit mismatch.

I recommend setting the custom breakpoint to rem as well so it works as expected: https://play.tailwindcss.com/Zw7yHqbReM

[zommerberg]

Thanks!

[valgeirb]

This is crucial information that should be mentioned in the docs/upgrade guide in my opinion.

I'm glad I found this question as I was having the exact same issue.

[valgeirb]

You even use px in your examples