[Bug]: the order of the utilities is incorrect

[gera2ld]

Reproduction

https://twind.run/forum-taper-stir

Describe the bug

Open the reproduction link, note that the class top(12 md:0) doesn't work as expected.

md:top-0 should take priority of top-12 but it doesn't.

Severity

serious, but I can work around it

System Info

## Browsers:
 - Chrome: 112.0.5615.121

Additional Information

I have encountered this issue for several times and it's really hard to reproduce. Sometimes it works after I remove or change some of the irrelevant classes. The same happens here, it will work if I remove the injectGlobal.

[TheYuriG]

Had this happening to me as well when i tried to override a color from another class conditionally (input validation), had to end up applying the color as inline style when the state changed. Since your problem is related to media queries, you can't work around it like I could

[oeb25]

I'm experiencing much the same thing. The class order seems to be dependent on unrelated classes:

// Generated CSS has `.sm\:hidden` before `.flex`
<nav class="group relative flex items-center text-lg sm:hidden">

But adding a seemingly unrelated class to the end flips the order:

// Generated CSS has `.flex` before `.sm\:hidden`
<nav class="group relative flex items-center text-lg sm:hidden bg-red-500">

I've failed to reproduce this in the playground, where the classes are generated in the correct order. It seems to be highly dependent on the classes of other unrelated elements.

Concretely, this occurs in at this line.

Version info

• deno@1.36.3
• twind@1.1.3
• fresh@1.4.2
• Presets:
  • preset-tailwind@1.1.4
  • preset-autoprefix@1.0.7
  • preset-line-clamp@1.0.7
  • preset-typography@1.0.7
  • preset-tailwind-forms@1.1.2

[ieiekk]

I'm experiencing the same problem here, and its order even dependent to the route.