3👍
Here is the boilerplate: https://github.com/kissu/nuxt-tailwind-typography-darkmode-boilerplate
It comes with:
- Nuxt v2 since v3 is not public yet
- @nuxt/content even it’s totally unrelated to the actual issue
- @nuxtjs/tailwindcss, v2.1 + JIT enabled
- @nuxtjs/color-mode for dark mode support
- @tailwindcss/typography configured to support
dark: prose-light - basic working ESlint + Prettier configuration
This is basically an updated version of the tailwind configuration for the @nuxt/content-theme-docs without being stuck to write documentation files only. (there is maybe a way of doing this out of the box but I did not found it)
This configuration was heavily inspired by this awesome post from Adam: https://github.com/tailwindlabs/tailwindcss-typography/issues/69#issuecomment-752946920
I’m not sure what tailwindcss-dark-mode is really used for since it is not really active and that the few variants that I’ve tried are already working out of the box with Tailwind 2. But I found this interesting issue in case it may be helpful one day: https://github.com/ChanceArthur/tailwindcss-dark-mode/issues/37#issue-681948280
The current configuration (tailwind.config.js) is essentially relying on toggling buttons at the top of the page because of darkMode: 'class'. If you set it to media, you can either toggle it in your system or go to Chrome’s dev tools and ctrl + shift + p and choose your any prefers-color-scheme for testing purposes.
