tailwindcss-classnames icon indicating copy to clipboard operation
tailwindcss-classnames copied to clipboard

darkMode: 'class' in tailwind.config.js not supported

Open rockmusicmaker opened this issue 2 years ago • 0 comments

Environment:

Current Behavior

setting darkMode to 'class' in the tailwind.config.js and running tailwindcss-classnames -I does not produce any "dark:" prefixed types resulting in typical errors when trying to something like classnames(backgroundColor('dark:g-white')) produces a Argument of type '"dark:bg-white"' is not assignable to parameter of type 'TBackgroundColor .. error. Setting darkMode to 'media' does not cause this.

Expected Behavior

I would expect setting the darkMode property on the tailwind.config.js file to cause tailwindcss-classnames to generate the classes prefixed with "dark:".

How to Reproduce

set "darkMode: 'class'" in tailwind.config.js and run tailwindcss-classnames -i then try to set a component's className to "classnames(backgroundColor('dark:g-white'))" and observe the error.

Possible solutions (Optional)

I was able to fix this by updating my local TailwindConfigParser.js from: if (this.getDarkMode() == 'media') mediaBreakpoints.push('dark'); to if (_this.getDarkMode() == 'media' || _this.getDarkMode() == 'class') mediaBreakpoints.push('dark');

Additional Questions

  • [ x ] I've searched the issues list and this is not a duplicate
  • [ x ] I'm willing to fix this error

rockmusicmaker avatar Apr 07 '22 00:04 rockmusicmaker