You’re referencing Tailwind CSS utility classes and a selector targeting list items. Explanation:
- list-inside: Places list markers (bullets/numbers) inside the content flow rather than outside the left edge.
- list-disc: Uses a solid disc bullet for unordered lists.
- whitespace-normal: Collapses sequences of whitespace and wraps text normally (default white-space behavior).
- [li&]:pl-6 — This is a Tailwind arbitrary selector using the “parent selector” (&) with a custom attribute-like prefix. It targets an element where the selector becomes li& then applies padding-left: 1.5rem (pl-6). In practice this is unusual; likely intent is to select li elements and give them left padding.
Practical, corrected approaches:
- If you want list items with inside discs, normal wrapping, and left padding on li:
- Use standard classes on the ul/ol and li:
- ul class=“list-inside list-disc whitespace-normal”
- li class=“pl-6”(or use space-y / marker utilities)
- If you want to target li via Tailwind arbitrary selector (example to apply pl-6 when used on a parent element):
- Use group and child selector:
- parent: class=“group”
- CSS via arbitrary selector: class=“[&>li]:pl-6” — this applies pl-6 to direct child li elements.
- Or to target any descendant li: class=“[&li]:pl-6”
Examples:
- &]:pl-6” data-streamdown=“unordered-list”>
- ul class=“list-inside list-disc whitespace-normal [&li]:pl-6”
- &]:pl-6” data-streamdown=“unordered-list”>
- This places markers inside, normal whitespace, and adds pl-6 to every descendant li.
Notes:
- Use [&li]:pl-6 (underscore becomes a space) or [&>li]:pl-6 for direct children; avoid nonstandard li& syntax.
- list-inside already places the marker inside the padded area; adding pl-6 shifts content and marker together.
- Verify Tailwind version (arbitrary variants require v3+).
Leave a Reply