What version of Tailwind CSS are you using?
v3.3.1

What build tool (or framework if it abstracts the build tool) are you using?
vite4 and vite3 (happened with both)

What version of Node.js are you using?
v19.1.0

What browser are you using?
Chrome

What operating system are you using?
WSL2 ubuntu 22

Reproduction URL
https://github.com/remiconnesson/tailwind-vue-deep-apply-dark-bug

Describe your issue
hello,

tailwincss is set in darkMode: "class" and we are using useDark from vueUse to add and remove the dark class.

in App.vue we have a child component

<template>
  [ ... ]
  <div class="wrapper">
    <ChildText />
  </div>
  [ ... ]
</template>

<style scoped>
[...]
.wrapper :deep(.child-text) {
  @apply text-pink-700 dark:text-yellow-300;
}
[...]
</style>

targeting @/components/ChildText.vue

<template>
  <div class="child-text text-xl mt-8">
    I am targeted by my parent component with
  </div>
  [...]
</template>

but the dark: modifier doesn't work in 3.3 when it used it work in 3.2

as shown in the screenshot below

• with @3.3, in the repro, one line of text should be yellow but is pink instead

• with @3.2 we observe the correct behavior

P.S: in App.vue

<template>
  [...]
  <span class="block classic-apply">this is the target of an @apply rule</span>
  [...]
</template>

<style scoped>
/* A */
.classic-apply {
  @apply text-xl text-orange-700 dark:text-white;
}
</style>

/* B */
<style>
.wrapper .child-text-global {
  @apply text-sky-700 dark:text-purple-300;
}
</style>

we show that the dark modifier do work with

• (A.) apply + dark: does work for elements in the same SFC inside a scoped style block
• (B.) apply + dark: does work inside a global style block

P.P.S: As stated in the vue doc here
https://vuejs.org/api/sfc-css-features.html#scoped-css

vue transforms this

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

into this

.a[data-v-f3f3eg9] .b {
  /* ... */
}

so this issue might not be only related to an interaction vuejs