You’re asking about the Tailwind CSS utility combination: list-inside list-disc whitespace-normal [li&]:pl-6. Here’s what each part does and how they work together:
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside — Positions list markers (bullets) inside the content flow so markers sit within the text block instead of hanging in the left margin.
- list-disc — Uses filled circle bullets for list items.
- whitespace-normal — Collapses whitespace and allows wrapping; lines break normally.
- [li&]:pl-6 — Arbitrary variant targeting the parent selector pattern
li &(Tailwind JIT arbitrary variants syntax). This appliespl-6(padding-left: 1.5rem) to any element that matches the generated selector. Specifically,[li&]:pl-6means: when the current element is a descendant matched by the selectorliapplypadding-left: 1.5rem. In practice this is used to add left padding to elements inside an li, e.g., to indent nested content within list items.
How they combine (common usage):
- On a
- or
- ,
Example HTML (Tailwind):
Multi-line content that wraps and stays aligned with padding.
Notes:
- Behavior depends on Tailwind version and JIT enabling; arbitrary variants require JIT mode (available by default in modern Tailwind).
- If you want the bullet outside the content area, use
list-outsideinstead oflist-inside. - [li>_&]:pl-6 (or similar) — adjust selector syntax per exact need.
Leave a Reply