Suggesstion: Add TailWindCss Version 2 support with dark mode. about tailblocks HOT 4 CLOSED

I'm a fan of this repo, so I made a fork that has support for TW2.0 dark mode. The way it is put together isn't very friendly to someone who might want to use this in real life, maybe? The tailblocks.css in /public is the one you want to use, it's only 25k pre-gzipped.

I wrote a buuuunch of scripts that will merge the current light & dark .js files into one merged .js file. I also added support for theme through css variables. Take a look:

https://github.com/kenotron/tailblocks

If there's interest from @mertJF, I can make a PR, but the change is extensive:

1. added acorn / acorn-walk & family to get dark-mode class names merging working
2. replaced ${props.theme} with a CSS variable based one
3. added a tailwind.css.js, postcss, cssnano + a yarn css script that will generate a custom css that includes dark mode + css vars
4. run yarn css to regenerate the tailblocks.css

from tailblocks.

This is an example: https://github.com/kenotron/tailblocks/blob/3370b6b3f3ed248139bd94557e068c52f9c61c05/src/blocks/contact/merged/a.js#L39

You can see how I have dark: prefix, replacement of ${props.theme} into class names like dark:focus:ring-theme-900. I changed a bit of logic in App.js to make it so that the theme and dark mode switches mostly affect classes in the frame

from tailblocks.

Okay created #64 to illustrate what I mean via PR view for easy peeking. It's Draft because I made so many changed without discussing with @mertJF ahead of time

from tailblocks.

I've no plan to support a dark mode feature with adding a lot of classes. The tailblocks work with TailwindCSS defaults so if I add the feature some potential users couldn't use the blocks. On the other hand, I want to thank you for your effort.

from tailblocks.