Unexpected behavior when overloading classes

[alicerocheman]

Hello!

Thanks

Thank you for your work, Tailwind 4 is great, even if the migration is not easy with a lib and several consumer projects!

Tech details

What version of Tailwind CSS are you using?

v4.2.1

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

Webpack encore

What version of Node.js are you using?

v20.19.0

What browser are you using?

reproduced on Chrome, and firefox

What operating system are you using?

macOS

Reproduction URL

Play reproduction

Describe your issue

Architecture Context

I have a library which exports various things including basic css variables (which can be overloaded and extended by the consumer projects), a basic tailwind theme (which can be extended by the consumer projects) and react components using tailwind classes that exist in the tailwind theme mentioned (ie text-gray-500)

One of my consumer projects has dynamic custom colors, which overload some elements (some of which are in the lib) and not others.

Problematic style

To do this, I overload some css variables in my consumer project, but I also must do the following, in order to overload certain library elements:

.text-gray-500\!:not(
    .tunnel-stepper .text-gray-500\!,
    #tunnel-main .text-gray-500\!,
    #cartValidation-special-request.text-gray-500\!,
    #title-banner .text-gray-500\!,
    .ratings-banner .text-gray-500\!,
    .ratings-banner.text-gray-500\!,
    .tippy-box.bg-white .text-gray-500\!,
    .info-icon.text-gray-500\!,
    dialog.bg-white.text-gray-500\!,
    dialog.bg-white .text-gray-500\!
  ) {
  @apply text-text-666!;
}

This used to work fine in v3, but is buggy in v4

Current Behavior & steps to reproduce in the Tailwind playground

• The target element looks "text-gray-500"
  In the Chrome devtools, with the target element selected:
• in the "computed" tab, it says "color: " and the "text-gray-500" value
  but then if you click on the arrow next to that it takes you to the "styles" tab
• in the "styles" tab,
  • the active rule is the "text-text-666" overload, showing the "text-text-666" color in the preview square and value
  • the initial ".text-gray-500!" is inactive (strikethrough)
  • if you disable the inactive rule, the "text-text-666" color appears

Conclusion

I know this might seem like a marginal case, but this regression is quite problematic for us, and so far I haven't found another solution, and given the contradictory stuff happening in the devtools, I would say this is indeed a bug.