Conflicts not always showing in v4 projects

[thecrypticace]

See tailwindlabs/tailwindcss#14361

I've been able to reproduce this myself under certain conditions as well:

/* app.css */

@import "tailwindcss";

@theme {
  --width-8xl: 90rem;
  --color-neon-pink: oklch(71.7% 0.25 360);
}

<div class="foo max-w-7xl max-w-8xl hover:underline">testing</div>
<div class="max-w-6xl max-w-7xl max-w-8xl">testing</div>
<div class="line-through underline">testing</div>
<div class="p-4 p-12">testing</div>

The first class list does not report conflicts

[lstephensca]

I just ran into this today, seemingly randomly. I was on 4.0.0-alpha.23 initially but upgraded to 4.0.0-alpha.24 late yesterday evening. Everything seemed to work quite well until I opened my project this morning. Out of no where, all defined classes in the @theme directive were sorted to the front and the class conflict reporting reverted to what you were able to reproduce. I did downgrade to 4.0.0-alpha.23 which solved the class sorting, but the class conflict reporting issue still remained. I ended up with a fairly long class with only one error (max-w-8xl) max-w-8xl border-neon-pink bg-neon-pink mx-auto max-w-7xl border border-amber-300 bg-slate-500 p-4 py-2 being reported. Once I removed either of the max-w-* classes, then the error was resolved.