dark selector does not work correctly in @apply starting from version 3.3.0

[GermanJablo]

What version of Tailwind CSS are you using?: v3.3.0
What build tool (or framework if it abstracts the build tool) are you using?: postcss-cli 8.4.32, Next.js 13.4.19, webpack
What version of Node.js are you using?: v20
What browser are you using?: Chrome
What operating system are you using?: Windows

Reproduction URL:
https://play.tailwindcss.com/8lfHYybqfC

Describe your issue

In the repro you can see that in the latest version of tw v3 the scrollbar does not turn green in dark mode, while it does in v2.

There is a workaround if you use the .dark class:

  /* THIS DOES NOT WORK */
  ::-webkit-scrollbar-track { @apply bg-yellow-800 dark:bg-green-800; }
  ::-webkit-scrollbar-thumb { @apply bg-yellow-500 dark:bg-green-500; }
  ::-webkit-scrollbar-thumb:hover { @apply bg-yellow-600 dark:bg-green-600; }

  /* THIS DOES WORK */
  ::-webkit-scrollbar-track { @apply bg-yellow-800 }
  ::-webkit-scrollbar-thumb { @apply bg-yellow-500 }
  ::-webkit-scrollbar-thumb:hover { @apply bg-yellow-600 }
  .dark ::-webkit-scrollbar-track { @apply bg-green-800; }
  .dark ::-webkit-scrollbar-thumb { @apply bg-green-500; }
  .dark ::-webkit-scrollbar-thumb:hover { @apply bg-green-600; }

This should work with the first option as well.

This issue has already been reported in different discussions without a repro, or in similar issues that were linked to a specific framework.

• I got the workaround from this similar discussion: dark: not working in @apply (tailwind 2.0.1) #2917 (reply in thread)
• description of this issue without repro @apply dark: on globals.css seems to be broken #11497
• description of this issue without repro Workaround Tailwind 3.3 not correctly applying dark styles #11665
• Not sure, but I think it's related Specificity issue after upgrading to 3.3.1 #11077
• Linked to Angular: Tailwind 3.3+ dark mode does not work with encapsulated angular components using @apply #12352
• Linked to Vue: in 3.3 @apply dark: doesn't work anymore with vue :deep(.child-class) #11024

According to the release article of v3.3 there should be no breaking changes. This is one though.

[adamwathan]

Definitely a real bug, thanks for reporting! My gut is we can fix this by updating the class strategy implementation to work like the selector strategy implementation, where we put the & at the front:

  } else if (mode === 'class') {
-   addVariant('dark', `:is(${selector} &)`)
+   addVariant('dark', `&:is(${selector}, ${selector} *)`)
  }

By the looks of it, our internals will properly hoist out the pseudo-elements automatically if we move things around this way.

Will try to get this patched up this week 👍

[RaghavenderSingh]

@adamwathan i am interested can you assign it me

[elinoza]

I came across the same issue with my next project. I solved it by making these changes in tailwind.config.js: from darkMode: ["class", "[data-theme='dark']"], into darkMode: ["selector", "[data-theme='dark']"],
"The selector strategy replaced the class strategy in Tailwind CSS v3.4.1."

[thecrypticace]

I've merged in the fix for this and am aiming to tag a patch release within the next few hours. I'll update this once it's out.

[thecrypticace]

v3.4.2 has been released and both the CDN and Play have been updated. Your Play now works as expected!