w-full is not respected in Vue Markdown Block Component

[luishugoooo]

Environment

---

• Operating System: Windows_NT
• Node Version: v20.13.1
• Nuxt Version: 3.13.2
• CLI Version: 3.14.0
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

Layout:

<template>
    <div class="max-w-6xl brd m-auto flex flex-col items-center brd min-h-dvh prose-lg">
        <NavBar></NavBar>
        <slot></slot>
    </div>
</template>

Component:

<template>
    <div class="brd w-full">
        <div>Component Content</div>
        <slot></slot>
    </div>
</template>

Markdown:

::component-name
Content
::

Expected result

Actual result:

Describe the bug

Due to the wrapper div which is created by the framework, CSS/Tailwind classes like w-full do not work as expected in a component in markdown. This seems like a big issue, as it makes styling for components used in markdown very unpredictable. Maybe I overlook something, but why should components work differently in markdown compared to when I use them directly in other .vue components?

Additional context

No response

Logs

No response

[larbish]

ContentRenderer rendered a <div> around the markdown so I f you want to apply the w-full to this div also you can just do this: <ContentRenderer class="w-full" … />

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 30 days with no activity.