I have, so far, some html data coming from my database and I'm rendering it like this (with largely v0 generated code):

<CardContent className="space-y-4">
    <h4 className="font-medium text-slate-900 mb-2">
        Description:
    </h4>
    <div className="text-slate-700 leading-relaxed text-pretty list-disc" dangerouslySetInnerHTML={{ __html: position.description }} />
</CardContent>

The html contains a ul, in which I'd like to render items with a disc, hence my naive attempt at adding list-disc to the div in hope it would cascade like old school CSS, but the items are still rendering without any list item indicator. I'm guessing list-disc has to be applied to a ul itself.

Is there any better way to achieve this than adding a list style to globals?