When defining custom functional @utility with the same name for different purposes results in unwanted behavior.

If you want to use the same name, similar to how we can use text-red-500 and text-2xl then the order matters and only the first one "wins" right now.

@utility foo-* {
  color: --value(--color- *);
}

@utility foo-* {
  font-size: --spacing(--value(number));
}

In this case, foo-red-500 will work, but foo-123 will not.

Play: https://play.tailwindcss.com/1VmWKocy9O?file=css

If you swap the order, then foo-123 will win, but foo-red-500 won't result in anything.

@utility foo-* {
  font-size: --spacing(--value(number));
}

@utility foo-* {
  color: --value(--color- *);
}

Play: https://play.tailwindcss.com/71oBj8xrI1?file=css

The expected behavior is that both work.