JS config colors get kebab-cased while CSS config colors don't

[gabrielmfern]

What version of Tailwind CSS are you using?

v4.1.17

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

Just the tailwindcss CLI

What version of Node.js are you using?

v25.1.0

What browser are you using?

N/A

What operating system are you using?

Linux

Reproduction URL

https://github.com/gabrielmfern/wrongly-kebab-cased-colors-with-js-config

Describe your issue

When defining camel cased colors through the CSS config, like so:

@theme {
  --color-camelCased: #ffffff;
}

Utilities with the camelCased color work just fine. text-camelCased, for example, becomes

@layer utilities {
  .text-camelCased {
    color: var(--color-camelCased);
  }
}

But when defining the same color though a JS config:

@config "./tailwind.config.js";

export default {
  theme: {
    colors: {
      camelCased: '#ffffff'
    }
  }
}

Only the kebab-cased version of the color's name works instead. So text-camel-cased, for example.

[gabrielmfern]

Going down the code, the keyPathToCssProperty function seems to be at fault here

tailwindcss/packages/tailwindcss/src/compat/apply-config-to-theme.ts

Lines 152 to 163 in efe084b

	export function keyPathToCssProperty(path: string[]) {
	// The legacy container component config should not be included in the Theme
	if (path[0] === 'container') return null
	path = path.slice()
	if (path[0] === 'animation') path[0] = 'animate'
	if (path[0] === 'aspectRatio') path[0] = 'aspect'
	if (path[0] === 'borderRadius') path[0] = 'radius'
	if (path[0] === 'boxShadow') path[0] = 'shadow'
	if (path[0] === 'colors') path[0] = 'color'
	if (path[0] === 'containers') path[0] = 'container'