tailwindlabs
Utility class name transforms lowercase+uppercase keys (camelCase/PascalCase) to kebab-case unexpectedly when using JavaScript config file
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 |
|---|---|
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!
