dark: not working

[shiftlabs1]

trafficstars

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

[rigor789]

I will investigate, it's supposed to work - but perhaps a recent tailwind update "broke" something for us...

[rigor789]

 "tailwindcss": "3.1.8",

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]

 "tailwindcss": "3.3.0",

and above breaks it - will dig further.

Edit: looks like it's changed the selector strategy in here: https://github.com/tailwindlabs/tailwindcss/pull/10766

Will figure out a fix soon - until then keep your version < 3.3.0 and it should work fine.

[vallemar]

Same problem here, the problem is that with the version in the package ^3.1.8 the 3.3.1 is downloaded, this is going to mess up a lot of people. To use the specific version remove the ^ from the version of package.json

//Before:
"tailwindcss": "^3.1.8",

//After:
"tailwindcss": "3.1.8",

[eltorio]

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]

@eltorio you must use the "tailwindcss": "3.1.8" version while it is fixed

[eltorio]

@vallemar I have no problem with 3.2.7, just with 3.3.x

[rigor789]

Seems like the selectors have now been changed again in 3.4 to :is(:where()):

https://github.com/tailwindlabs/tailwindcss/pull/12584

Removing that in https://github.com/NativeScript/tailwind/commit/149d6762f0e0b93baaa690ac3ca499ab90fc5f7f

[rigor789]

@nativescript/[email protected] seems to work with latest TailwindCSS now!

[vallemar]

@rigor789 What more properties can we use now that we have :is working?

[rigor789]

Not sure, :is is downgraded to a similar css syntax for now using @csstools/postcss-is-pseudo-class.

[bradrice]

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]

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.

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]

in tailwind 4 dark: doesnt work as well. I'm trying to use custom dark class