Repository: tailwindlabs/tailwindcss

Problem statement:
dark selector does not work correctly in @apply starting from version 3.3.0
<!-- Please provide all of the information requested below. We're a small team and without all of this information it's not possible for us to help and your bug report will be closed. -->

**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:

```css
  /* 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: https://github.com/tailwindlabs/tailwindcss/discussions/2917#discussioncomment-6435337
- description of this issue without repro https://github.com/tailwindlabs/tailwindcss/discussions/11497
- description of this issue without repro https://github.com/tailwindlabs/tailwindcss/discussions/11665
- Not sure, but I think it's related https://github.com/tailwindlabs/tailwindcss/discussions/11077
- Linked to Angular: https://github.com/tailwindlabs/tailwindcss/issues/12352
- Linked to Vue: https://github.com/tailwindlabs/tailwindcss/issues/11024

According to [the release article of v3.3](https://tailwindcss.com/blog/tailwindcss-v3-3#new-caption-side-utilities) there should be no breaking changes. This is one though.



Hints:
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:

```diff
  } 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 👍 
@adamwathan i am interested can you assign it me
 
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."](https://tailwindcss.com/docs/dark-mode)


Patch:
diff --git a/src/corePlugins.js b/src/corePlugins.js
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -270,7 +270,7 @@ export let variantPlugins = {
       addVariant('dark', selector)
     } else if (mode === 'class') {
       // Old behavior
-      addVariant('dark', `:is(${selector} &)`)
+      addVariant('dark', `&:is(${selector} *)`)
     }
   },
 


Test patch:
diff --git a/tests/apply.test.js b/tests/apply.test.js
--- a/tests/apply.test.js
+++ b/tests/apply.test.js
@@ -2212,3 +2212,40 @@ test('applying user defined classes with nested CSS should result in an error',
     `)
   })
 })
+
+test('applying classes with class-based dark variant to pseudo elements', async () => {
+  let config = {
+    darkMode: 'class',
+    content: [],
+  }
+
+  let input = css`
+    ::-webkit-scrollbar-track {
+      @apply bg-white dark:bg-black;
+    }
+    ::-webkit-scrollbar-track:hover {
+      @apply bg-blue-600 dark:bg-blue-500;
+    }
+  `
+
+  let result = await run(input, config)
+
+  expect(result.css).toMatchFormattedCss(css`
+    ::-webkit-scrollbar-track {
+      --tw-bg-opacity: 1;
+      background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+    }
+    :is(.dark *)::-webkit-scrollbar-track {
+      --tw-bg-opacity: 1;
+      background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+    }
+    ::-webkit-scrollbar-track:hover {
+      --tw-bg-opacity: 1;
+      background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+    }
+    :is(.dark *)::-webkit-scrollbar-track:hover {
+      --tw-bg-opacity: 1;
+      background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+    }
+  `)
+})
diff --git a/tests/dark-mode.test.js b/tests/dark-mode.test.js
--- a/tests/dark-mode.test.js
+++ b/tests/dark-mode.test.js
@@ -16,7 +16,7 @@ it('should be possible to use the darkMode "class" mode', () => {
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       ${defaults}
-      :is(.dark .dark\:font-bold) {
+      .dark\:font-bold:is(.dark *) {
         font-weight: 700;
       }
     `)
@@ -39,7 +39,7 @@ it('should be possible to change the class name', () => {
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       ${defaults}
-      :is(.test-dark .dark\:font-bold) {
+      .dark\:font-bold:is(.test-dark *) {
         font-weight: 700;
       }
     `)
@@ -133,7 +133,7 @@ it('should support the deprecated `class` dark mode behavior', () => {
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
-      :is(.dark .dark\:font-bold) {
+      .dark\:font-bold:is(.dark *) {
         font-weight: 700;
       }
     `)
@@ -153,7 +153,7 @@ it('should support custom classes with  deprecated `class` dark mode', () => {
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
-      :is(.my-dark .dark\:font-bold) {
+      .dark\:font-bold:is(.my-dark *) {
         font-weight: 700;
       }
     `)
@@ -181,7 +181,7 @@ it('should use legacy sorting when using `darkMode: class`', () => {
         --tw-text-opacity: 1;
         color: rgb(187 247 208 / var(--tw-text-opacity));
       }
-      :is(.dark .dark\:text-green-100) {
+      .dark\:text-green-100:is(.dark *) {
         --tw-text-opacity: 1;
         color: rgb(220 252 231 / var(--tw-text-opacity));
       }