Typography plugin | How do I change the vertical spacing between list elements?

[donni-h]

Hey folks,
I am currently rendering some markdown, and the typography plugin is coming in really handy - thanks for making it!
I do struggle with one thing though: lists (and their elements) look kind of out of place.
See here:

I am trying to make the rendering space-efficient, while still looking nicely styled. Preferably, the list and its items would have a similar vertical spacing to the regular text, so that they fit in better.

currently, I am using these classes to style the Markdown:
<div className='prose text-base leading-normal prose-blue max-w-none'> {markdown} </div>

I have tried playing around with the prose-ul: and prose-li: utility classes, but as my CSS-knowledge is a bit lacking, that did not help much either.

As context, I am using React-Markdown to convert plain text to markdown and the HTML looks something like this:

<div class="prose text-base leading-normal prose-blue max-w-none">
  <p>
    Lorem ipsum<br>
    ABC
  </p>
  <ul>
    <li>This list</li>
    <li>kind of looks</li>
    <li>out of place</li>
  </ul>
</div>

If any of you have had a similar problem or know a solution, I'd be grateful about any and all suggestions! :)

[wongjn]

You can use prose-li:my-* to adjust the spacing: https://play.tailwindcss.com/UceI1kDccn

[ayonpaul8906]

To make your lists more space-efficient and match your regular text spacing, you can override the default typography margins using these specific utility classes:

1. prose-li:my-0 : This removes the top and bottom margins from individual list items.

2. prose-ul:my-0 : This removes the spacing around the entire list container.