nuxt.jstailwind-cssmarkdowntypographynuxt-content

Tailwind Typography Not Applying prose styles to Nuxt Content v3 (was working in Nuxt content v2)

I am migrating my Nuxt content project to use @nuxt/content v3 from Nuxt content v2. I'm also using Tailwind Typography installed correctly. Despite this, my markdown content rendered with <ContentRenderer> isn’t styled by Tailwind’s prose classes. I am following the same logic I used in Nuxt content v2, where it worked nicely and automatically styled the contents.

Here’s my setup in Nuxt content v3: package.json:

 "devDependencies": {
    "@nuxt/devtools": "^2.5.0",
    "@nuxt/fonts": "^0.11.2",
    "@nuxt/image": "^1.10.0",
    "@nuxt/ui": "^3.1.3",
    "@nuxtjs/i18n": "^9.5.5",
    "nuxt": "^3.17.5",
    "vue": "^3.5.16"
  },
  "dependencies": {
    "@nuxt/content": "^3.6.3",
    "@nuxtjs/seo": "^3.0.3",
    "@tailwindcss/typography": "^0.5.16",
    "@vueuse/core": "^13.3.0",
    "autoprefixer": "^10.4.21",
    "better-sqlite3": "^12.2.0",
    "remark-reading-time": "^2.0.2",
    "typescript": "^5.8.3"
  },

nuxt.config.ts:

// nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@nuxt/content',
    '@nuxt/image',
    '@nuxt/fonts',
    '@nuxtjs/seo',
    '@nuxtjs/i18n'
  ],

  content: {
    build: {
      markdown: {
        highlight: {
          theme: {
            default: 'github-light',
            dark: 'github-dark',
            sepia: 'monokai'
          }
        }
      }
    }
  },

  // Nuxt UI Prefix
  ui: {
    colorMode: true,
    fonts: true
  },

  css: ['~/assets/css/main.css'],
})

// also had additional i18n config, etc which is not much relevant here, i guess

My pages/service/[slug].vue:

<template>
  <div
    class="flex-grow w-full lg:w-8/12 xl:w-8/12 p-6 bg-gray-100 dark:bg-gray-800 flex-1 text-gray-900 dark:text-gray-100 overflow-y-auto"
  >
    <template v-if="service">
      <!-- Title and Description of the document -->
      <h2
        class="font-extrabold mb-4 text-center transition-transform transform hover:scale-105"
      >
        {{ service.title }}
      </h2>

      <h4 class="font-light mb-6 text-center">
        {{ service.description }}
      </h4>

      <article
        class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl prose-indigo dark:prose-invert dark:prose-dark mx-auto"
      >
        <ContentRenderer :value="service" />
      </article>
    </template>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import { useAsyncData } from "nuxt/app";

const { locale } = useI18n();
const slug = useRoute().params.slug as string;

// Based on the locale value get the news content and display them
const { data: service } = await useAsyncData(
  `services-${locale.value.toUpperCase()}-${slug}`,
  () => {
    return queryCollection(`services${locale.value.toUpperCase()}`)
      .where("slug", "=", slug)
      .first();
  },
  {
    watch: [locale],
  }
);
</script>

I have installed the "@tailwindcss/typography": "^0.5.16", and configured it in tailwind.config.js just like I was doing in Nuxt content v2:

const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");

module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./content/**/*.{md,json,yml,yaml}",
  ],
  plugins: [require("@tailwindcss/typography")],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        primary: "indigo",
      },
      backgroundImage: ["dark"],
    },
  },
};

I also tried the approach mentioned in GitHub issues, and that did not work either: GitHub Issue Link

I looked into Nuxt content documentation, where they say we can override the prose styles in components/content/.

Following is what I am looking for:

Solution

  • Okay, but TailwindCSS is not installed in your project - only the Typography plugin is.

    TailwindCSS v4

    As of January 2025, the installation process has changed significantly, and the tailwind.config.js file is no longer used.

    If you follow the installation steps for v4, you won't need the tailwind.config.js file anymore — instead, you'll be able to add the plugin using the @plugin directive.

    @import "tailwindcss";

@plugin "@tailwindcss/typography";

    Just a review for configuration: Since the use of tailwind.config.js is no longer the default, it's worth considering migrating your configuration.

    The content property is simple: from v4 onwards, there is automatic source detection by default, which can be further customized with the @source directive.

    For dark mode, you need the @custom-variant directive.

    You can declare colors inside @theme.

    The backgroundImage setting has been removed; instead, you can declare your own @utility.

    TailwindCSS v3

    // tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}