What is the reason behind not generating spacing values in order?

[sezeregrek]

In tailwind config, spacings are like these;

spacing: {
  px: "1px",
  0: "0",
  0.5: "0.125rem",
  1: "0.25rem",
  1.5: "0.375rem",
}

But in generated css file, order is changing.

.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-px { padding: 1px; }
.p-0\.5 { padding: 0.125rem; }
.p-1\.5 { padding: 0.375rem; }

I realized this when I wanted to override p-0.5 with p-1, but result didn't change because of the generated order. This situation is same for others like, margin, inset...

[simonswiss]

Hey!

Can't really speak about the reason behind this order (I actually never noticed these classes were generated in this specific order), but I am curious:

In what scenario are you ever overriding p-0.5 with p-1 on the same element? Is this in a React/Vue component situation where the component itself contains utility classes, and you apply extra utilities when "consuming" the component somewhere in your app?

[sezeregrek]

Yes we have a react component library. I have to override utility classes for edge scenarios.

Overriding p-0.5 with p-1 is a simple example to show the situation.

Thnx

[adamwathan]

This is just a JS quirk, numeric keys always come first in objects when you loop over the keys. “0.5” is considered a string so it is grouped with “px”, but the integers are all hoisted to the top.