You’re referencing Tailwind CSS utility classes and a custom variant selector. Here’s a concise breakdown:
- list-inside: Places list markers (bullets/numbers) inside the content box, so the marker appears within the list item’s text flow.
- list-disc: Uses a solid circle bullet for unordered list items.
- whitespace-normal: Allows normal wrapping and collapsing of whitespace (default text wrapping behavior).
- [li&]:pl-6 — this is a Tailwind arbitrary selector variant. It targets a parent when a child li matches a pattern; specifically:
- &]:pl-6” data-streamdown=“unordered-list”>
- Syntax explanation: [li&] compiles to a selector where li is placed before the current selector (&). For example, if applied on a ul element class, [li
- Practical intent: add left padding to the element when it is directly preceded by an li (or when an li wraps/relates depending on nesting). It’s used to adjust padding based on surrounding li elements.
Example usage on a ul to get padded nested lists:
- Parent
<ul class="list-inside list-disc whitespace-normal [li_&]:pl-6" data-streamdown="unordered-list"> <li class="py-1 [&>p]:inline" data-streamdown="list-item"><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">Child</span></li> </ul>
Result: the nested ul receives pl-6 when inside an li, pushing nested items to align visually.
Note: Exact selector output depends on Tailwind version and your config; verify generated CSS if precise selector behavior is critical._
Leave a Reply