Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

custom dark: classes should not be inverted #71

Open
szamanr opened this issue Apr 25, 2023 · 4 comments
Open

custom dark: classes should not be inverted #71

szamanr opened this issue Apr 25, 2023 · 4 comments

Comments

@szamanr
Copy link

szamanr commented Apr 25, 2023

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.

@szamanr
Copy link
Author

szamanr commented Apr 25, 2023

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
Copy link
Contributor

jmnote commented Oct 1, 2023

image

image

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

@jmnote
Copy link
Contributor

jmnote commented Oct 2, 2023

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants