Text styling not applying to md() inside div()

[nbbaier]

Text styles added in the second argument of div() do not apply to strings inside md(). For example, the following behaves as expected:

await div("Hello world!", "bg-blue-300 text-red-500 text-2xl p-5");

As seen in this screenshot:

But this next snippet only comes out with the background color and padding, but the text is default:

await div(md(`Hello world!`), `bg-blue-300 text-red-500 text-2xl p-5`);

Screenshot:

It would be nice if we could style the text content of md() with Tailwind classes.

Also, a broader question: Are there limits on what tailwind classes can be used in the second argument of div()?

[shyagamzo]

Ran into this myself. I moved the tailwind classes in to the md call and it worked:

const markdown = `.......`;

await div(highlight(md(markdown, 'text-md m-6')));

While div and highlight receive container classes, they didn't apply until I set them inside the md call. I'm guessing this has to do with style isolation or simply with the style hierarchy.

It would definitely be nice if they can be applied at the top level.

[nbbaier]

Nice catch! I just tried that and it worked great.

[johnlindquist]

md() applies its own set of classes. The second argument of md overrides those classes (like you already figured out).

I'm not sure it makes sense to have the div container classes override the md classes.

You can roll your own prompts/components like this:

let myMd = async markdownString => {
  return div(`
<div class="override">
<style>
@keyframes pulsing-glow {
    0% {
        text-shadow: 0 0 5px white;
    }
    50% {
        text-shadow: 0 0 20px white, 0 0 10px white;
    }
    100% {
        text-shadow: 0 0 5px white;
    }
}
.override h2 {
    color: red;
    font-size: 7rem;
    animation: pulsing-glow 2s infinite;
}

</style>
${md(markdownString)}
<div>
`)
}

await myMd(`
## Anything is Possible!
`)