v4 completions are sorted alphabetically (was by value in v3)

[TipoSamuel]

What version of VS Code are you using?

v1.97.0 (User setup)

What version of Tailwind CSS IntelliSense are you using?

v0.14.3

What version of Tailwind CSS are you using?

v4.0.4

What package manager are you using?

pnpm

What operating system are you using?

Windows - WSL (Debian)

Describe your issue

I have manually upgraded to Tailwind CSS v4 in my project with Astro, but when using the class autocomplete feature (IntelliSense), the suggestions appear in alphabetical order. This is in some cases inconsistent with the workflow and reduces intuitiveness when selecting classes.

Expected value (as shown in versions prior to Tailwind V4)

Value currently obtained (As shown in Tailwind V4)

[thecrypticace]

cc @RobinMalfait think we could tweak the sorting in core to fix this?

[thecrypticace]

So technically in v3 things were kinda coincidentally sorted so it looked like it was by value. This is because numeric keys in JS object's are always re-sorted to be in numeric order. But the actual order is just the order of the keys in the config. You can see this by using this config in v3:

export default {
  theme: {
    spacing: {
      'a3': '3rem',
      '2xs': '0.2rem',
      'a1': '1rem',
      'a2': '2rem',
      'a7': '7rem',
      'a5': '5rem',
    }
  },
  plugins: [],
}

Here's a screenshot from (Tailwind Play):

Still think we should try to make this sorting better tho if we can

[TipoSamuel]

Thank you for taking the time to research and explain the behavior in detail. I completely agree with your observation—having the suggestions sorted by value (if possible) would indeed make the experience much more intuitive. I hope this feedback can be considered for future updates or configurations. Thanks again for your help!

[Lermatroid]

+1 on this. Would be great to have measurements be numerically sorted.

[t0rbik]

This seems related: on v3 typing in ic would suggest items-center, but after upgrading to v4 the first suggestion is now :in-checked. Which obviously breaks the flow that peeps are used to, or well, at least I'm used to.

V4:

V3:

[thecrypticace]

Yeah, that would be because variants generally appear first and in-checked is a valid variant in v4.

I'd like to completely revisit how variants are suggested in IntelliSense at some point to properly support compound variants (not-in-group-has-peer-checked:flex is a valid class and I'd like IntelliSense help people interactively build variants that support this).

If we did that then we could possibly tweak how / what suggestions are shown

[ViggoV]

I also ran into this today after an 8 hour debug session to get Tailwind v4 to not break my project.