Utility class name transforms lowercase+uppercase keys (camelCase/PascalCase) to kebab-case unexpectedly when using JavaScript config file

[woohm402]

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?

[email protected] & @tailwindcss/[email protected]

What version of Node.js are you using?

v20.18.1

What browser are you using?

Chrome v136.0.7103.114

What operating system are you using?

macOS

Reproduction URL

In my real project I use vite, but for minimal reproduction, I used @tailwindcss/cli here.

https://github.com/woohm402/bug-reproduction/tree/9479cdf

Reproduction guide is written in readme.

Describe your issue

When using a JavaScript-based config (tailwind.config.js) and defining theme keys that include a lowercase letter followed by an uppercase letter (e.g., lightGreen or LightGreen), the expected utility class (e.g., bg-lightGreen) is not generated. Instead, Tailwind generates bg-light-green, converting the key to kebab-case.

export default {
  content: ["./index.html"],
  theme: {
    backgroundColor: {
      lightGreen: "#94d3a2",
    },
  },
};

• Expected: bg-lightGreen
• Actual: bg-light-green

generated output.css	devtools element tab

[woohm402]

I opened a PR that might fix this: #18115 .

From what I saw, apply-config-to-theme.ts and theme.ts handle the key transformation differently, so I tried to align them.

Could someone confirm if this approach makes sense or if there’s a reason it was done differently? Thanks!