V3 to V4 migration fails due to V4 not applying custom utility classes with mixed case naming.

[Houwie7000]

What version of Tailwind CSS are you using?

v4.0.0-beta.8

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

react-router v7.1.1 (which uses Vite v5.4.11)

What version of Node.js are you using?

v23.5.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/Houwie7000/tailwindcss-minimal-reproduction

Describe your issue

One the page there are three html "p" elements written like this

<p className="topBarMenuDropDownItemButton">bad Hello world!!!!!</p>
<p className="goodutilityname">good Hello world!!!!!</p>
<p className="badUtilityName">bad Hello world!!!!!</p>

With app.css including this:

@utility topBarMenuDropDownItemButton {
  @apply text-red-700 flex justify-between w-full px-4 py-2 text-sm leading-5 text-left;
}

@utility goodutilityname {
  @apply text-red-700 flex justify-between w-full px-4 py-2 text-sm leading-5 text-left;
}

@utility badUtilityName {
  @apply text-red-700 flex justify-between w-full px-4 py-2 text-sm leading-5 text-left;
}

Tailwindcss will now only apply styles to the class "goodutilityname".

You can see in my minimal reproduction repo's git history that the utilities in V3 were written like this:

@layer components{
  .topBarMenuDropDownItemButton {
    @apply text-red-700 flex justify-between w-full px-4 py-2 text-sm leading-5 text-left
}

The "npx @tailwindcss/upgrade@next" modified the app.css to its current form.