You’re referring to Tailwind CSS utility classes and a custom selector pattern. Breakdown:
- list-inside — sets list-style-position: inside;
- list-disc — sets list-style-type: disc;
- whitespace-normal — sets white-space: normal;
- [li&]:pl-6 — this is a Tailwind arbitrary selector using the relational pseudo-class syntax; it targets a parent when a child matches. Specifically:
- &]:pl-6” data-streamdown=“unordered-list”>
- [li&] is shorthand for an attribute-style selector where the ampersand (&) is replaced by the current selector; in Tailwind JIT this allows creating a selector that matches a parent when it contains an li element with a class? Practically, [li&]:pl-6 applies padding-left: 1.5rem (pl-6) to any element whose selector becomes li_& (uncommonly used).
- More likely intent: target a parent element when it contains an li — the correct Tailwind pattern is [&>li]:pl-6 to apply pl-6 to direct child li elements, or [&_li]:pl-6 to target descendant li elements.
Correct examples:
- Apply padding to direct li children:
[&>li]:pl-6 => > li { padding-left: 1.5rem; } - Apply padding to any descendant li:
[&li]:pl-6 => li { padding-left: 1.5rem; }
So to get list items indented with those utilities, use:
- &]:pl-6” data-streamdown=“unordered-list”>
- class=“list-inside list-disc whitespace-normal [&_li]:pl-6”
That yields: list-style inside, disc bullets, normal wrapping, and 1.5rem left padding on each li.
Leave a Reply