You’re referencing Tailwind CSS-style utility classes and a custom selector. Here’s what each part does and how they combine:
- list-inside: Places list markers (bullets/numbers) inside the content box of the list item rather than hanging outside.
- list-disc: Uses filled circle bullets for unordered lists.
- whitespace-normal: Collapses whitespace and wraps text normally (default white-space behavior).
- [li&]:pl-6: This is a bracketed arbitrary selector in Tailwind. It targets list item elements using a selector pattern where ”&” is replaced by the generated class selector. Specifically, [li&]:pl-6 applies padding-left: 1.5rem (pl-6) to any element matching selector li (i.e., a li element whose class begins with that generated token). In practice this is commonly used to add left padding to list items when using custom list markers or when list items need extra inset.
Example HTML effect:
- &]:pl-6” data-streamdown=“unordered-list”>
- ul with classes “list-inside list-disc whitespace-normal [li&]:pl-6” will render disc bullets inside each li, allow normal wrapping, and add 1.5rem left padding on each li matched by the arbitrary selector—shifting content right so bullets and wrapped lines align nicely.
Note: Bracketed arbitrary selectors require Tailwind v3+ and that the generated class name pattern matches the li prefix; ensure your build allows arbitrary selector usage.
Leave a Reply