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
.
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.
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