You’re referring to Tailwind CSS utility classes and a custom selector. Here’s a concise breakdown:
- list-inside: places list markers (bullets/numbers) inside the content flow so the marker is part of the text block.
- list-disc: uses a solid circle bullet for unordered lists.
- whitespace-normal: collapses whitespace and wraps text normally (default whitespace handling).
- [li&]:pl-6 — this is Tailwind’s arbitrary selector syntax. It targets li elements that are the parent of the current selector context using the sibling/parent-ish pattern:
- &]:pl-6” data-streamdown=“unordered-list”>
- li& means “select the parent li of the current element” (the underscore stands for the usual escaping of special characters in arbitrary variants).
- :pl-6 applies padding-left: 1.5rem (24px) to that selected li.
Put together: using these on a nested element can make parent
&]:pl-6”> Long text that should wrap and keep normal whitespace handling. Result: disc markers inside the text block, normal wrapping, and the li receives 1.5rem left padding via the arbitrary selector.
Leave a Reply