Custom utilities sorted incorrectly

[hugotiger]

What version of Tailwind CSS are you using?
v4.0.10

What build tool (or framework if it abstracts the build tool) are you using?
Tested on:
Next.js 15.1.7
PostCSS 8.5.2

What version of Node.js are you using?
v23.8.0

What browser are you using?
Chrome

What operating system are you using?
macOS

Reproduction URL
https://play.tailwindcss.com/RhJ7x3kQUN

Describe your issue
In the upgrade guide it is mentioned that custom utilities are sorted based on the number of properties they define. See this section.

Now as shown in the reproduction URL, this does not seem to function properly. The type-h1 utility specified 3 properties, but are still sorted last in the CSS output. This makes it's specificity the highest and you can't override the font size with e.g. the text-sm class.

If we however instead use the @apply directive it seems to work as expected.

To me this seems to be a bug, but I might just misunderstand the docs, or there might be some alternative preferred solution.

I looked into using component classes instead, but this was not really feasible as it doesn't work with IntelliSense (see this play link). Maybe this is the most suitable solution, but due to the IntelliSense issue it's not really feasible for our team right now.

Really love v4! Thanks for the hard work 🙌

[wongjn]

I looked into using component classes instead, but this was not really feasible as it doesn't work with IntelliSense (see this play link).

You can get them to appear if you actually register the class name into Tailwind with @utility, see https://play.tailwindcss.com/2grGS2VBS9?file=css

[hugotiger]

You can get them to appear if you actually register the class name into Tailwind with @utility, see https://play.tailwindcss.com/2grGS2VBS9?file=css

Okay that's great, will use that for now! Thanks for the quick reply 👍

[philipp-spiess]

Huh that's interesting, thanks for the report. Agree that I would expect type-h1 to be sorted before text-sm here:

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.type-h1 {
  font-size: var(--text-4xl);
  line-height: var(--text-4xl--line-height);
  font-weight: var(--font-weight-bold);
}

[philipp-spiess]

Okay found the issue, will be fixed in the next patch. Thanks for the bug report!

[hugotiger]

Okay found the issue, will be fixed in the next patch. Thanks for the bug report!

Thanks for the quick fix! Much appreciated 🌟