tailwindlabs/tailwindcss-typography

Numbered lists are being cut off

elmeister opened this issue · 1 comments

elmeister commented

What version of @tailwindcss/typography are you using?

0.5.10

What version of Node.js are you using?

18.12.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://github.com/tailwindlabs/tailwindcss-typography

Describe your issue

Hello, thank you for the great package
The issue is reproducible on https://play.tailwindcss.com/
The following list

<div class="prose">
  <ol start="9999">
    <li>Blueberries</li>
    <li>Apples</li>
    <li>Oranges</li>
  </ol>
</div>

Is expected to look like this
image

But actually looks like this
image

adamwathan commented

Hey! This is by design and happens with the regular browser user-agent styles as well if the number is high enough:

https://jsfiddle.net/tv8h4uzx/

There's no way to place the list marker on the outside and have the width of the marker dynamically adjust to fit the content unfortunately, you have to pick a fixed size.

When picking the styles we tried to optimize the design for the more common scenario of lists with less than 100 items, because excessive padding to support wider numbers looks ugly in those scenarios.

If you have a very long list, you can adjust the padding on a per-list basis with a class like prose-ol:pl-16:

https://play.tailwindcss.com/3Ml9mYA933

  • 👍1