[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

• [email protected]
• [email protected]
• [email protected]
• Presets:
  • [email protected]
  • [email protected]
  • [email protected]
  • [email protected]
  • [email protected]

[ieiekk]

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

[stale[bot]]

Hey folks. This issue hasn't received any traction for 90 days, so we're going to close this for housekeeping. If this is still an ongoing issue, please do consider contributing a Pull Request to resolve it. Further discussion is always welcome even with the issue closed. If anything actionable is posted in the comments, we'll consider reopening it. ⓘ