Dark mode broken in 3.4.0, last working 3.3.7

[bilogic]

I'm using a number of flowbite components on my page and darkmode broke in 3.4.0

      tailwind.config = {
            darkMode: 'class',

Anyone facing the same issue?

[dario-baumberger]

I created a stackblitz to describe an other issue. In my example I'm using v 3.4.0 and it works.

You can try if you want:
https://stackblitz.com/~/github.com/dario-baumberger/taiwlindcss-dark-mode-print-dialog

just disabled all addVariant and change darkMode: "false", with darkMode: "class",

As a work around you can also add this to add your custom dark mode:

addVariant("dark", ".dark &") this needs darkMode: "false",

[bilogic]

Thanks but I can't quite follow, do you mean you know the cause of my issue?

I prefer to know what broke and what is tailwind's official replacement to get the same behavior. Could not find anything in the change log. Would you know?

[dario-baumberger]

No sorry don't know the cause. I just stumbled into this discussion because I have another dark mode issue. The only thing I can tell is, that it works with v 3.4.0 in my example.

I haven't seen anything about removed darkMode: "class" in the changelogs.

I would also prefer the official solution instead of a workaround - but just in case you need one.

[wongjn]

Consider providing a full code example that reproduces the unexpected behavior.

[andreww2012]

I'm also experiencing some issues with the dark mode after updating to 3.4.0 from the previous version. For me, these issues are caused by the new (seemingly undocumented - no, mentioned in the change log) way of generating selectors corresponding to classes with dark: prefix which changes selector specificity:

3.3.7:

.dark .dark\:bg-neutral-700 { ... }

3.4.0:

:is(:where(.dark) .dark\:bg-neutral-700) { ... }

If the :where() pseudoclass is removed, everything starts to look the same.

[wongjn]

Seems to be related to #12584. You may have been relying on what seems to be regarded as a bug whereby the class strategy CSS rules had (0, 2, 0) specificity instead of the (0, 1, 0) specificity they have now.

[bilogic]

I have filed #12633 thanks @andreww2012

[andreww2012]

I presume this is something that is going to be reverted, so the fix for me was using the important ! modifier (because I'm overriding someone else's styles but only for the dark mode).

Although, I would still like to have an option to opt out of this in case one either needs to support old browsers (which don't support :is() and :where()) or have a non-trivial amount of work to get things looking the same as in 3.3.7.

I also wish the consequences of this change were highlighted in the release blog post or at least in the change log.

[bilogic]

@andreww2012 i think better to make our case at #12633

[adamwathan]

Can someone provide a reproduction that shows something that used to work and doesn’t work now? We updated all of our projects with dark mode without issue so need to understand the specific situation that breaks.