tailwindcss: Dark mode broken in 3.4.0, last working 3.3.7

What version of Tailwind CSS are you using? 3.4.0

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

What version of Node.js are you using?

CDN, so N/A

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

We identified the offending CSS in https://github.com/tailwindlabs/tailwindcss/discussions/12627#discussioncomment-7911565

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.

Describe your issue

Dark mode is broken.

About this issue

Original URL
State: closed
Created 6 months ago
Reactions: 8
Comments: 16 (5 by maintainers)

Most upvoted comments

Was hoping to push out a solution for this before the holidays but likely not going to be until first week of January after the Christmas break, sorry folks. Use v3.3 in the mean time if you’re affected by this and we’ll push out an update right after the holidays.

+12

adamwathan on Dec 22, 2023

We’ve got a fix for this in #12717. I’ve got to backport this to v3.4, get a release out an update play + the cdn. It’ll take a bit before everything’s updated but everything should (hopefully) be out in the next hour or two. I’ll leave a comment here when done.

thecrypticace on Jan 5, 2024

A more convoluted example using Skeleton:

Working (with Tailwind 3.3.3): https://stackblitz.com/edit/skeletonlabs-repl-ojdt8e?file=src%2Froutes%2F%2Bpage.svelte

Not Working (with Tailwind 3.4.0): https://stackblitz.com/edit/skeletonlabs-repl-hxd8qn?file=src%2Froutes%2F%2Bpage.svelte

How the card style is implemented: https://github.com/skeletonlabs/skeleton/blob/dev/packages/plugin/src/styles/components/cards.css

How the background token Skeleton uses is generated: https://github.com/skeletonlabs/skeleton/blob/dev/packages/plugin/src/tailwind/tokens/backgrounds.ts#L34

So bg-surface-100-800-token is basically:

.dark .bg-surface-100-800-token {
  background-color: rgb(var(--color-surface-800))
}

.bg-surface-100-800-token {
  background-color: rgb(var(--color-surface-100))
}

Sarenor on Dec 21, 2023

Skeleton is also making use of darkMode: 'class' to enable the LightSwitchs behaviour of toggling the mode depending on the users choice persisted in Local Storage. That means that all projects utilizing Skeleton will be using darkMode: 'class'.

This update is breaking for all of our users that customized Skeleton components depending on light/dark mode since instead of dark:bg-primary-800 they now have to use dark:!bg-primary-800.

A resolution to this problem and preferably a revert until a major Tailwind version will be published would be very much appreciated.

Sarenor on Dec 20, 2023

Release is out — play and CDN are both updated

thecrypticace on Jan 5, 2024

Thanks for letting us know! Let’s see on the first week of jan. Enjoy the holidays.

mshajid on Dec 23, 2023

No problem Adam, we’ll follow that advice for now. Thanks and have a nice holiday!

Sarenor on Dec 22, 2023