Search code examples
vue.jsnuxt.jsnuxt-content

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

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>
Solution

  • Here is the boilerplate: https://github.com/kissu/nuxt-tailwind-typography-darkmode-boilerplate

    It comes with:

    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.

    enter image description here