You’re referencing Tailwind CSS utility classes and a custom selector pattern. Here’s what each piece does and how they combine:
- list-inside: Places list markers (bullets/numbers) inside the content box so the marker sits inside the flow of the list item.
- list-disc: Uses a filled disc (•) as the list marker for unordered lists.
- whitespace-normal: Collapses whitespace and wraps text normally (default white-space behavior).
- [li&]:pl-6 — a variant using Tailwind’s arbitrary selector syntax:
- &]:pl-6” data-streamdown=“unordered-list”>
- [li&] targets elements where the selector replaces & with the current element; specifically it matches li + the current element. Practically this pattern is often intended as a parent-child style when author used a typo or a custom delimiter; the correct typical form for styling li children would be [li&]:pl-6 or li:pl-6 depending on intent
- pl-6 applies padding-left: 1.5rem (24px).
Correct/typical ways to add left padding to list items:
- &]:pl-6” data-streamdown=“unordered-list”>
- Add padding on the ul/ol: pl-6 on the ul/ol (preferred):
- .
- Add padding on li elements:
- …
.
- Add padding on li elements:
If you intended to use Tailwind’s arbitrary variant to target li children from the parent, use the child selector like:
- ul/[&>li]:pl-6 — in Tailwind JIT you can write class=“[&>li]:pl-6” on the ul to apply pl-6 to its direct li children.
Example (preferred):
- –
- Item
– …
If you show the exact HTML/intent I can give the precise Tailwind class to use._
Leave a Reply