[v4] Naming conflict between color and font-size utilities

[zachhornsby]

What version of Tailwind CSS are you using?

v4.1.7

What build tool (or framework if it abstracts the build tool) are you using?

N/A

What version of Node.js are you using?

N/A

What browser are you using?

Firefox

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/ah65EbqNL2

Describe your issue

I have a set of components that use semantic variables to customize values between different sites. I have a banner component that has variables for color and font-size. When I define --text-banner: 14px; and --text-color-banner: red; the font-size utility is never generated, only the color one. Font size only works if color isn't defined. The same happens when you try to define a --border-width-banner and --border-color-banner.

This feels like a bug and it should generate both utilities using the same class name (i.e. text-banner).

[wongjn]

See this for a maintainer response to a similar post: #16716 (comment)