custom `dark:` classes should not be inverted

[szamanr]

tailwind: v3.3.0 nightwind: v1.1.13 i believe this behaviour changed after a recent tailwind upgrade (v3.3?). i'm using darkMode: "class", in my tailwind config.

given an element like this:

<div class="bg-red-200 dark:bg-blue-600">
  foo
</div>

expected result

the background in dark mode should be bg-blue-600.

actual result

the custom background in dark mode gets inverted and is bg-blue-200.

this is what gets computed:

i believe the first one (.dark :is(...)) is nightwind - if i disable that, i see bg-blue-600 correctly.

[szamanr]

as a workaround, i can add nightwind-prevent class. however, that prevents all inversions, so fails for a use case where i only want to prevent inverting e.g. the background, but not the text or border.

[jmnote]

root cause: tailwind change( https://github.com/tailwindlabs/tailwindcss/pull/10835 )

[jmnote]

Another workaround... I found out that it can be solved with tailwind config. ( https://tailwindcss.com/docs/configuration#selector-strategy )

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  important: '#app',
}

A side effect of this solution is that nightwind does not work with @apply.

[LeMatosDeFuk]

@jmnote do you know how to fix it? I'd like to fork and fix it for myself