Reliable order for utilities

[kocv59]

What version of Tailwind CSS are you using?

v4.1.3

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

webpack 5.98.0
postcss 8.5.3
postcss-loader 8.1.1

What version of Node.js are you using?

v20.19.0

What browser are you using?

Chrome

Describe your issue

V4 order of utilities changed. V3 put w-full before other w- utilities so an element could have w-full by default and adding a different w- would override it without having to remove w-full which makes simpler code.

Now w-full is last so it doesn't work and breaking layouts. People relied on old order without realizing it isn't meant to be relied on. So it's still a breaking change and it should be part of upgrade guide.

Numbered utilities like these should be added to css file in reliable order. Biggest to smallest makes more sense because smaller is usually used in overriding. But opposite is fine too but it should be consistent and documented.

Then we can use power of css to override by adding classes where it can be done and only remove the old class when it has to be done. Without reliable order the old class always has to be removed.

[kocv59]

#15884 Other people had breaking change problems in V4 too.

[kocv59]

Other changes from V3: fraction utilities came after spacing utilities (w-1/2 after w-10) but now its opposite.