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:
TailwindCss Typography
styles to my Markdown .md
filesNuxt content v2
.Nuxt Content v3
that I have missed looking into?Okay, but TailwindCSS is not installed in your project - only the Typography plugin is.
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.
@plugin
directive - TailwindCSS v4 Docs@tailwindcss/typography
- StackOverflow@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.
<html>
or add class="dark"
- StackOverflowYou can declare colors inside @theme
.
@theme
directive - TailwindCSS v4 DocsThe backgroundImage
setting has been removed; instead, you can declare your own @utility
.
backgroundImage
in tailwind config not working - StackOverflow// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/typography'),
// ...
],
}