is list-disc not working, or what am I doing wrong?

[acoyfellow]

What am I misunderstanding here.. I can't get list-disc to work?

<ul class="list-disc">
  <li>foo</li>
</ul>

Reproduction: https://play.tailwindcss.com/nzvnJV9wT0

[wongjn]

It may be that you cannot visually see the list marker. Here is a slight modification of the layout to make the list marker visible.

[ahmetcanisik]

It may be that you cannot visually see the list marker. Here is a slight modification of the layout to make the list marker visible.

You can also wrap your ul in a p tag or try what @wongjn said.

[mybearworld]

This is an annoyance with CSS where by default, the list marker actually appears outside of the element. You can use list-inside to fix this: https://play.tailwindcss.com/9GvAY49hfW

[scherroman]

list-inside looks ugly with longer list items though, it doesn't keep the next lines indented properly :/

list-disc with an offset of ml-4:

list-disc with list-inside:

[sonik-auctane]

This is a weird behaviour I encountered as well. I hope this is helpful to you:

<ul class="list-disc list-inside">
  <li class="list-item">item WITH disc. ✅</li>
  <li>item WITHOUT disc. ❌</li>
</ul>

[zolboo-b]

made my day

[maurer2]

I believe you also loose the list marker if you change a list item's default display value from display: list-item to any other value like, e.g. block, flex, grid etc.

[Varshni11]

Do you know any workaround or solution for this?

[wongjn]

You could consider:

• Faking the list marker with a pseudo-element.
• Wrapping the content of the <li> element in another element and applying the alternative display value to that element.

[Varshni11]

Thanks for your suggestions!For me, your first suggestion worked, but the second one created weird results in UI, like all the content inside the div under li appeared in the next line after the bullet.

[wongjn]

For the second suggestion, you'd probably need to apply more CSS around it to get it to display as you'd like.

[mohammadazeemwani]

Greetings.

with list-disc, there needs to be some padding left < default it is 0 ig.
So this should fix the issue:

<ul class="list-disc pl-7">
  <li>Item First</li>
  <li>Item Second</li>
</ul>