Dark mode doesn't work in v3.3.1

[ibilux]

The dark mode doesn't work in v3.3.1 anymore in some browsers.

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?

Sveltekit 1.15.7, vite 4.3.1

What version of Node.js are you using?

v18.16.0

What browser are you using?

Falkon

What operating system are you using?

Linux

Reproduction URL

The dark mode in the tailwind official site can't apply.

Describe your issue

The dark mode doesn't work (don't apply) in v3.3.1 anymore in some browsers (Android 8.1 and Falkon brwosers).
It was working in previous versions v3.2.7.

[JasonMortonNZ]

Same here using v3.3.1 and Chrome browser, Vite 4.1.4 and node v19.4.0 on OSX.
Edit: I see you mentioned this might be a Vue issue. Using Vue here.

[thecrypticace]

@ibilux @JasonMortonNZ can either or both of you provide a reproduction? It's hard to triage without having a project to look at.

[reinink]

Hey! So feel free to still provide a reproduction as @thecrypticace requested, but I think I know what's going on here.

In Tailwind CSS v3.3 we made the dark and rtl/ltr variants insensitive to DOM order —see #10766. You can read that PR for more details, but the way we solved this is by using the :is() pseudo-class class.

Here is how the generated CSS changed between Tailwind CSS v3.2 and v3.3:

/* Before */
.dark .dark\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

/* After */
:is(.dark .dark\:text-white) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

The :is() pseudo-class class is well supported in modern browsers, but if you're targeting older browsers I'd recommend using the @csstools/postcss-is-pseudo-class polyfill. It's a PostCSS plugin that removes any wrapping :is() from selectors. Or, alternatively, you can of course just stay on Tailwind CSS v3.2 until the is() selector is more widely supported.

I hope that helps!

[ibilux]

Thank you @reinink for the clarification.
The problem is indeed with old browsers because of the :is() pseudo-class class.
I can not use Tailwind CSS v3.2 because i need to use the rtl/ltr new features.
Can you please point me on how to use the @csstools/postcss-is-pseudo-class polyfill with vite or sveltekit ?

Thank you @reinink. It works now with @csstools/postcss-is-pseudo-class polyfill.