You’re describing Tailwind CSS utility classes and a custom variant/selector targeting list items. Here’s what each part does and how to use it:
- list-inside: Places list marker (bullets/numbers) inside the content flow so the marker is part of the text block instead of hanging in the margin.
- list-disc: Uses a filled circle bullet for unordered lists.
- whitespace-normal: Collapses whitespace and wraps text normally (default behavior).
- [li&]:pl-6 — a selector-style arbitrary variant targeting list item elements; it applies padding-left: 1.5rem (pl-6) to the li when the current element matches the variant selector. Explanation:
- &]:pl-6” data-streamdown=“unordered-list”>
- In Tailwind arbitrary variants, [selector]:utility lets you scope utilities to elements matching that selector relative to the current element.
- [li&] means the selector is li&, where Tailwind replaces & with the current selector. Practically this becomes li:current-element — used to target li elements when the utility is placed on a parent. However, the underscore is used because CSS selectors can’t start with certain characters; [li&] encodes li + &.
- When placed on a ul (for example): ul[class=“[li
Usage example (Tailwind JIT / arbitrary variant enabled):
- HTML:
- First long item that wraps to multiple lines and will have extra left padding.
- Second item.
Result: bullets stay inside, text wraps normally, and each li gets 1.5rem left padding via the arbitrary variant so wrapped lines align with the text after the bullet.
Notes:
- Browser support depends on generated CSS; confirm Tailwind version supports arbitrary variants (Tailwind v2.2+ / JIT-enabled and v3+).
- [&>li]:pl-6 applies pl-6 to direct li children.
Leave a Reply