You’re referencing Tailwind CSS-style utility classes and a custom variant selector. Here’s what each part does and how they combine:
- list-inside — sets list-style-position: inside; (bullets/markers are placed inside the content box and affect line wrapping).
- list-disc — sets list-style-type: disc; (filled circle bullets).
- whitespace-normal — sets white-space: normal; (text wraps normally; collapses sequences of whitespace).
- [li&]:pl-6 — a bracketed arbitrary selector variant that targets parent list items using a custom selector pattern. Interpreted as: for elements matching the selector “li&” apply pl-6. In Tailwind arbitrary variants, & represents the generated selector for the element; “li&” becomes li{element-selector}. Concretely this targets an element when it is immediately preceded by an li element in the DOM selector position “li element”. The utility pl-6 applies padding-left: 1.5rem (24px) at the element.
Practical effect when combined on a
- or
- child element
- &]:pl-6” data-streamdown=“unordered-list”>
- The list uses disc bullets placed inside the content box.
- Text wraps normally.
- The targeted element receives left padding of 1.5rem when matched by the arbitrary “li&” selector (i.e., when the element is within or following an li per selector specificity).
Example usage (Tailwind HTML):
html
<ul class=“list-disc list-inside”><li class=”[li&]:pl-6 whitespace-normal”> Long list item text that will wrap normally and receive left padding when the variant selector matches. </li></ul>Notes:
- The exact meaning of the arbitrary variant depends on Tailwind’s interpretation; common patterns are ”[&>li]:pl-6” (target child li) or ”[li&]:pl-6”. “li&” is uncommon — underscores are literal; ensure the selector matches your intended structure. Use browser devtools to verify the generated CSS selector.
- If you intended to add padding to li children, prefer a clearer variant like ”[&>li]:pl-6” or apply pl-6 directly on the li.
Leave a Reply