You’re referencing Tailwind CSS utility classes combined with a bracketed arbitrary selector: list-inside list-decimal 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 (numbers) inside the content box so markers are part of the text flow.
- list-decimal — Uses decimal numbers for ordered lists (1, 2, 3, …).
- whitespace-normal — Collapses whitespace and wraps text normally.
- [li&]:pl-6 — An arbitrary variant using a selector target: it applies pl-6 (padding-left: 1.5rem) to a li when the parent element (the one with these classes) matches the selector formed by replacing the underscore with the parent selector (&). Concretely, [li&] becomes li.parent-selector — meaning “select an li element that is immediately followed by (or is descendant of) the parent”? Actually Tailwind’s arbitrary selector syntax inserts the parent selector where & is placed; [li&] results in the CSS selector li.parentClass (no combinator). Practically this targets an li element that has the parent’s class appended — which rarely matches. More typical patterns are:
- &]:pl-6” data-streamdown=“unordered-list”>
- [>&>li]:pl-6 or [&>li]:pl-6 — to target direct child li elements.
- [&li]:pl-6 — to target descendant li elements (the underscore becomes a space).
Recommendation: replace [li&]:pl-6 with [&li]:pl-6 to add left padding to list items inside the element. That yields:
- &]:pl-6” data-streamdown=“ordered-list”>…
Result: markers inside, decimal numbering, normal wrapping, and each li gets padding-left:1.5rem._
Leave a Reply