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.

[philipp-spiess]

Hey! If I understand correctly, this issue is about the same utility class (w-*) being used multiple times on one element. Note that this was never behavior we encouraged and even v3 showed linting errors when using the IntelliSense extension:

Since this was not encouraged or documented before, you were relaying on undefined behavior. I suggest that you remove the duplicate utilities from your elements and render class names conditionally.

[kocv59]

Are classes output in file in random order?

[philipp-spiess]

No they are sorted based on the number of properties first, then based on some order of properties, and when they use the same properties the values are sorted alphanumerically IIRC, see: https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/property-order.ts

[kocv59]

No they are sorted based on the number of properties first

Do you have example of utilities this applies to and what's the benefit of sorting by number?