CodeTree not compatible with prose-lg tailwind class #5532
Description
Environment
- Operating System: Darwin
- Node Version: v23.7.0
- Nuxt Version: 4.2.1
- CLI Version: 3.30.0
- Nitro Version: 2.12.7
- Package Manager: npm@11.4.2
- Builder: -
- User Config: compatibilityDate, devtools, extends, modules, css, components, runtimeConfig, metaPixel, site, googleTracking, clarityTracking, ui, colorMode, imports, fonts, nitro, sitemap, routeRules, vite
- Runtime Modules: @nuxt/eslint@1.9.0, @nuxt/ui@4.2.1, @nuxt/fonts@0.11.4, @nuxtjs/seo@3.2.2, @nuxt/image@1.11.0, @nuxt/content@3.7.1, @pinia/nuxt@0.11.2, nuxt-mongoose@1.0.6, @vue-email/nuxt@0.8.19, @adkit.so/meta-pixel-nuxt@1.0.4
- Build Modules: -
Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
v4.0.0
Reproduction
Add prose-lg to a ContentRenderer
<ContentRenderer :value="doc" class="prose-headings:text-neutr-800 dark:prose-headings:text-neutr-200 prose-lg prose-headings:font-semibold prose-h2:text-4xl prose-h2:font-serif prose-h2:font-bold prose-h3:text-2xl prose-p:text-neutr-600 dark:prose-p:text-neutr-400 w-full" />Description
The CodeTree inherit the li vertical spacing from prose-lg, making it looks odd.
Additional context
Can easily be fixed by adding the following CSS:
li[role='presentation'] {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
ul[role='group'] {
padding: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
ul[role='tree'] {
padding: 8px;
margin: 0px;
}