tailwindcss-classnames
tailwindcss-classnames copied to clipboard
darkMode: 'class' in tailwind.config.js not supported
Environment:
-
TailwindCSS
version: tailwindcss@npm:@tailwindcss/[email protected] -
tailwindcss-classnames
version: [email protected] -
Node.js
version: v17.8.0
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