@apply dark: in pseudo class selectors does not work

[lemonCMS]

What version of Tailwind CSS are you using?

v4.1.17

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

For example: postcss-cli 11.0.0, Next.js 15.1.7, Vite 6.1.0

What version of Node.js are you using?

v24.2

** What browswer**
Chrome

For example: Chrome, Safari, or N/A

What operating system are you using?

Windows

Reproduction URL
https://play.tailwindcss.com/PtV9UI3TBW

Describe your issue

Darkmode in pseudo classes do not work, se the reproduction url.

.card:after {
  @apply absolute left-10 h-10 w-10 content-[""];
  @apply bg-white dark:bg-red-400;
}

When the site is in dark mode, then the dark:bg-red-400 is not being applied.

[wongjn]

Variation of problem in #15597.

Browsers don't like nested CSS inside pseudo-elements. Consider adjusting the wrapping:

• With @apply
• Reduced @apply

---

As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097
• https://x.com/adamwathan/status/1890406016291938701

[lemonCMS]

We know about those tweets, but the reality is the current application uses @apply a lot.