CSS based functional @utility with same name results in missing classes

[RobinMalfait]

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.

[kevster7000]

Defining both properties in the same utility works

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

[RobinMalfait]

Yep you are correct! And that's also what we do internally for core plugins, but I think there is still something nice about separating them.

Play with combination: https://play.tailwindcss.com/OUN74Zyn9S?file=css