How to configure @nuxt/tailwind + typography with dark mode

Question

I'm building a blog using nuxt.js/content, I want to apply dark mode using the plugin color mode.

how can I apply the dark mode to the articles?

I tried to do dark: prose-dark, didn't work.

<script>
export default {
  async asyncData({ $content, params }) {
    const post = await $content('posts', params.slug).fetch()
    return { post }
  }
}
</script>


<template>
  <div class="wrapper p-5 mt-20">
    <div class="max-w-screen-lg mx-auto px-3 py-5">
      <h1 class="text-6xl text-gray-800 font-medium"> {{ post.title }}</h1>
      <div class="img max-w-full mx-auto m-5">
        <img :src="require(`~/assets/${post.cover}`)" :alt="post.title" class="rounded-xl shadow-lg">
      </div>
    </div>
    <nuxt-content class="prose prose-lg max-w-screen-lg mx-auto px-3 my-5" :document="post" />
  </div>
</template>

Answer 1

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.