Repository navigation
dark: not working #187
Description
Can anyone help me understand this statement in the readme
// use the .ns-dark class to control dark mode (applied by NativeScript) - since 'media' (default) is not supported.
darkMode: ['class', '.ns-dark'],
As when i use
bg-teal-500 dark:bg-cyan-700
for example , the styling does not get applied when using dark mode on the phone, only the default bg-teal-500 is ever applied .
I even added it as a plugin in the config
plugins: [
plugin(function ({ addVariant }) {
addVariant('android', '.ns-android &');
addVariant('ios', '.ns-ios &');
addVariant('dark','.ns-dark &')
}),
],
still no Joy. What am i doing wrong
Thanks
Activity
[-]dar: not working[/-][+]dark: not working[/+]rigor789 commentedon Apr 2, 2023
I will investigate, it's supposed to work - but perhaps a recent tailwind update "broke" something for us...
rigor789 commentedon Apr 2, 2023
confirmed works (https://stackblitz.com/edit/nativescript-stackblitz-templates-k63h2u?file=app%2Fmain-page.xml&title=NativeScript%20Starter%20TypeScript), I'll see about newer versions
rigor789 commentedon Apr 2, 2023
and above breaks it - will dig further.
Edit: looks like it's changed the selector strategy in here: tailwindlabs/tailwindcss#10766
Will figure out a fix soon - until then keep your version < 3.3.0 and it should work fine.
vallemar commentedon Apr 11, 2023
Same problem here, the problem is that with the version in the package
^3.1.8the3.3.1is downloaded, this is going to mess up a lot of people. To use the specific version remove the^from the version of package.jsoneltorio commentedon Apr 22, 2023
same here dark is working with 3.2.7 but not with 3.3.0 nor 3.3.1 while using dark in class mode
vallemar commentedon Apr 22, 2023
@eltorio you must use the
"tailwindcss": "3.1.8"version while it is fixedeltorio commentedon Apr 22, 2023
@vallemar
I have no problem with 3.2.7, just with 3.3.x
rigor789 commentedon Jan 5, 2024
Seems like the selectors have now been changed again in 3.4 to
:is(:where()):tailwindlabs/tailwindcss#12584
Removing that in 149d676
rigor789 commentedon Jan 5, 2024
@nativescript/tailwind@2.1.0-rc.2seems to work with latest TailwindCSS now!vallemar commentedon Jan 5, 2024
@rigor789 What more properties can we use now that we have
:isworking?rigor789 commentedon Jan 5, 2024
Not sure,
:isis downgraded to a similar css syntax for now using@csstools/postcss-is-pseudo-class.bradrice commentedon Mar 28, 2024
I can't seem to get dark to work even with the rc. I might not know how to do it. The docs aren't very clear to me. I've added darkMode: ["class", ".ns-dark"], to my tailwind.config.ts. I don't see .ns-dark being added to my html file anywhere. If I manually add it to a selector, that works, but even when I am in light mode. How do I get it to work conditionally? It would be nice if there were a demo app with the dark theme working.
jkod commentedon Apr 29, 2024
The selector strategy replaced the class strategy in Tailwind CSS v3.4.1.
Try this instead:
darkMode: ['selector', '.ns-dark']I just updated my sample app to all latest dependencies where you can try out dark mode :-)
https://github.com/jkod/nativescript-tailwind-angular-starter
stephenjason89 commentedon Jul 29, 2025
in tailwind 4 dark: doesnt work as well.
I'm trying to use custom dark class