Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds support for native TW2.0 dark-mode (via class) & theme with CSS variables #64

Closed
wants to merge 16 commits into from

Conversation

kenotron
Copy link

Fixes #53

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:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Suggesstion: Add TailWindCss Version 2 support with dark mode.
2 participants