Custom font-size and color conflict

[yasinitskyi]

What version of Tailwind CSS are you using?

"^4.1.9"

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

"next": "16.0.0"

What version of Node.js are you using?

For example: v22.0.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Describe your issue

Custom font-size defined in global.css with --text- conflicts with custom colors defined with --color-, the last one in layout will be applied:

1. text-xxs is applied and text-custom-accent-highlight entirely ignored, even won't appear in html tree.

'text-custom-accent-highlight text-xxs' 

2. text-custom-accent-highlight is applied and text-xxs entirely ignored, even won't appear in html tree.

'text-xxs text-custom-accent-highlight' 

global.css:

:root{...}
.dark{...}

@theme inline {
   --text-xxs: 0.688rem;
   --text-xxxs: 0.625rem;
   --color-custom-accent-highlight: var(--hotline-accent-highlight);
}

Outsmarting tailwind like this won't work either:

@layer utilities {
  .text-xxs {
    font-size: var(--text-xxs);
  }
  .text-xxxs {
    font-size: var(--text-xxxs);
  }
}