You’re referencing Tailwind CSS utility classes and a variant-like selector. Here’s what each part means and how to achieve the intended result:
- list-inside: Places list-marker (bullet/number) inside the content box of the list item so the marker is part of the text flow.
- list-disc: Uses a filled circle bullet for unordered lists.
- whitespace-normal: Collapses whitespace and allows wrapping (the default white-space behavior).
- [li&]:pl-6 — this looks like a Tailwind arbitrary selector using the “match parent” pattern, intended to add padding-left to a list item when a particular selector matches. Interpreting it:
- &]:pl-6” data-streamdown=“unordered-list”>
- [li_&] is likely meant to target li elements when used on the parent ul/ol (the & stands for the parent selector in some CSS-in-JS contexts). In Tailwind’s arbitrary selector syntax you can write something like [&>li]:pl-6 to apply padding-left to immediate child li elements.
- The correct Tailwind form for applying padding-left to each li child is: [&>li]:pl-6 (or [&li]:pl-6 for any descendant li). Examples:
- &]:pl-6” data-streamdown=“unordered-list”>
- [&>li]:pl-6 — add pl-6 to direct child li elements.
- [&li]:pl-6 — add pl-6 to all descendant li elements.
Putting it together: to get a list with inside discs, normal wrapping, and extra left padding on list items, use one of these on the ul/ol:
- &]:pl-6” data-streamdown=“unordered-list”>
- For direct child li padding:
- …
- For any descendant li padding:
-
…
Notes:
- list-inside + pl-6 on li will indent the content further while keeping the bullet inside the content box; if you want the bullet outside the content box use list-outside instead.
- Some build setups require enabling JIT/arbitrary variants for the [&…] syntax to be recognized.
Leave a Reply