jjranalli/nightwind

custom `dark:` classes should not be inverted

szamanr opened this issue · 4 comments

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:
dark css

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

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 commented

image

image

root cause: tailwind change( tailwindlabs/tailwindcss#10835 )

jmnote commented

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.

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