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.

[wongjn]

You'd want to put your rule in @layer utilities: https://play.tailwindcss.com/nCY33tCbKN?file=css

Explanation

In v4, CSS rules are placed in native cascade layers. Utility classes are placed in @layer utilities.

With text-gray-950!, this would have the !important flag on the properties. !important flags inside cascade layers will always override non-layered rules, regardless of source order, specificity, etc. Hence, by placing our own rule inside @layer utilities, they are now on equal footing in terms of cascade layer. This means source order and specificity will have an effect. Thus, our custom rule now overrides the text-gray-950! utility class rule.

[alicerocheman]

great thanks

but does that mean all custom classes in the app should be in @layer utilities?

also, there is still the issue of the devtools showing contradictory info as to which rule is active

[wongjn]

but does that mean all custom classes in the app should be in @layer utilities?

No. You'd want to review which of the 4 Tailwind cascade layers best fits each CSS rule.

also, there is still the issue of the devtools showing contradictory info as to which rule is active

Devtools seems to show as expected for me at least

Firefox	Chrome

[alicerocheman]

Yes, but now you're using @layer utilities.
I meant when you don't use it, as I was doing before, the "computed" tab shows the base style, but the "style" tab shows the unapplied overloading style as active and the applied base style as inactive (strikethrough)

[wongjn]

Yes, you'd want to use @layer utility so that the custom rule overrides the base style.

What is shown in Style seems to be a misnomer. For me, Chrome shows the incorrect information but Firefox is correct:

Firefox	Chrome

[alicerocheman]

ok great, so it's probably just a chrome issue.

I'm having another issue, I don't know whether it's the same kind of problem:

https://play.tailwindcss.com/aoxuCL3N6W?file=css

it's a mdlg:hidden that doesn't work on a swiper element that has .swiper { display: block; } in the swiper lib styles

should i create a bug ?

[wongjn]

It's because the Swiper styles are not in a cascade layer. Unlayered styles override ones that are. You could try:

• Using !important flag on the Tailwind utility class: https://play.tailwindcss.com/1lpEGfj3EL
• Placing the Swiper lib styles in a @layer (you could use @import "swiper/styles.css" layer(components) in real code): https://play.tailwindcss.com/tHAS1FIKhS?file=css

[alicerocheman]

ok thanks.

I still feel like these are indeed an issue, if every unlayered style, internal or external, will override tailwind defined styles... using important everywhere doesn't seem great. i'l try with the layer(components) on the external style imports.

[emmnull]

Its not an issue nor is it directly related to tailwind, its how cascading and layers work per the spec. You cannot expect to bring external styles into a tailwind project without conflicts if you do not explicitly state what precedence you expect them to have. If you instead use custom/overloaded tailwind utilities, you most likely won't face these problems (and would also probably need fewer !important styles):

text-gray-950 overload: https://play.tailwindcss.com/4LPb8U5WvE?file=css
swiper: https://play.tailwindcss.com/JGwsB0leiM?file=css

[sydneyvaughn75-ops]

Yes right this is what I think as well

…

On Thu, Mar 12, 2026, 6:50 PM Emmanuel ***@***.***> wrote: Its not an issue nor is it directly related to tailwind, its how cascading and layers work per the spec. You cannot expect to bring external styles into a tailwind project without conflicts if you do not explicitly state what precedence you expect them to have. If you instead use custom/overloaded tailwind utilities, you most likely won't face these problems (and would also probably need fewer !important styles): text-gray-950 overload: https://play.tailwindcss.com/4LPb8U5WvE?file=css swiper: https://play.tailwindcss.com/JGwsB0leiM?file=css — Reply to this email directly, view it on GitHub <#19781 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/B7HZNK5CZTD5VZBD52SHTLD4QMBIFAVCNFSM6AAAAACWOMEJO2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMMJQGI3TONI> . You are receiving this because you are subscribed to this thread.Message ID: <tailwindlabs/tailwindcss/repo-discussions/19781/comments/16102775@ github.com>