Utility classes being ordered alphabetically instead of respecting source order in v4

[beromir]

When using Tailwind CSS v4 with the new CSS-based configuration, utility classes appear to be ordered alphabetically rather than respecting the source order in CSS files, which breaks expected CSS cascade behavior.

CSS:

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  /* ... */
}

@utility bg-section {
  @apply dark:bg-black;
}

HTML:

<div class="dark">
  <div class="w-full h-dvh bg-white bg-section">

  </div>
</div>

Expected Behavior

• The bg-section dark mode styles should override bg-white since it comes later in both the HTML classes and CSS source

Actual Behavior

• The bg-white class takes precedence
• Renaming bg-section to bg-wsection fixes the issue,

In v3 the screen was dark, as expected.

Reproduction:
https://play.tailwindcss.com/wowgLKaXx7