NativeScript/tailwind

dark: not working

Opened this issue · 13 comments

shiftlabs1 commented

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 commented

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

rigor789 commented 
 "tailwindcss": "3.3.0",

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 commented

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 commented

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 commented

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

  • 🚀1
eltorio commented

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

  • 👍1
rigor789 commented

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

tailwindlabs/tailwindcss#12584

Removing that in 149d676

rigor789 commented

@nativescript/tailwind@2.1.0-rc.2 seems to work with latest TailwindCSS now!

  • ❤️1
vallemar commented

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

rigor789 commented

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

  • 👍1
bradrice commented

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 commented

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