Compiled CSS being differently with different OS.

[sbimochan]

What version of Tailwind CSS are you using?

v3.3.3

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

webpack v5

What version of Node.js are you using?

v20

What browser are you using?

Chrome

What operating system are you using?

macOS

Describe your issue

After compiling, the css generated are different from macOS and Linux(maybe or could be of different according to machines) For e.g:

If we use classNames like top-1 and top-1\/2 In one machines (macOS) the output.css file contains:

.nv-top-1 {
  top: 0.25rem;
}

.nv-top-1\/2 {
  top: 50%;
}

and on some other place: it's opposite

.nv-top-1\/2 {
  top: 50%;
}

.nv-top-1 {
  top: 0.25rem;
}

Maybe it's something with oxide compiler and system setting how to treat \ and number on ascending order.

[thecrypticace]

If you upgrade to v3.4 do you still see this problem?

[sbimochan]

If you upgrade to v3.4 do you still see this problem?

Yes

[RobinMalfait]

Hey!

Both v3 and v4 should have a stable sorted output. If this is still an issue, a few things you can check are:

1. Make sure you are on the latest version
2. Make sure you have everything installed (remove the `node_modules1 folder just in case)
3. Make sure you are on the same Node.js version

In old old versions of Node.js, the .sort() on arrays wasn't stable.

Since version 10 (or ECMAScript 2019), the specification dictates that Array.prototype.sort is stable.

But that should not be an issue anymore.

If you still run into this issue, I would recommend to first try to upgrade to Tailwind CSS v4. If it's still an issue afterwards, create a new issue with a minimal reproduction repo attach to it.

Hope this helps!