This is a Tailwind CSS utility + selector pattern for styling nested lists and adjusting list-item padding. Breakdown:
- list-inside: Places list markers (bullets/numbers) inside the content box instead of hanging outside.
- list-disc: Uses a filled circular bullet for unordered lists.
- whitespace-normal: Collapses whitespace and wraps text normally (default white-space behavior).
- [li&]:pl-6 — a variant using Tailwind’s arbitrary variant syntax that targets li elements when they are the parent of the current element (the & is the selector placeholder). Concretely, this applies padding-left: 1.5rem (pl-6) to the current element when it is a direct child of an li element matched by that selector pattern
Practical intent (common usage):
- Typically applied on a ul or ol to ensure bullets are inside and text wraps normally.
- The arbitrary variant is often used to add extra left padding to nested items (so child elements align nicely with the bullet). For example, placing [li&]:pl-6 on a ul inside an li makes that ul receive left padding when it’s nested in an li.
Example HTML usage (conceptual):
- &]:pl-6” data-streamdown=“unordered-list”>
- …
Notes:
- Browser/CSS result depends on Tailwind version and build config—arbitrary variants require JIT/modern Tailwind.
- If you meant a different selector (e.g., li &:pl-6 or [&>li]:pl-6), the behavior changes: common patterns to pad direct li children are [&>li]:pl-6 or [&>li]:pl-4.
Leave a Reply