You’re referring to a Tailwind CSS utility pattern for styling nested list items. Explanation:
- list-inside: Positions list markers (bullets/numbers) inside the content box instead of hanging outside.
- list-disc: Uses discs (solid round bullets) for unordered lists.
- whitespace-normal: Collapses whitespace and wraps text normally (default white-space behavior).
- [li&]:pl-6: An arbitrary selector variant that targets li elements (the & is the component selector) and applies padding-left: 1.5rem (pl-6) to them. Concretely, it generates a rule like:
li.selector { padding-left: 1.5rem; }
when used in a component or parent selector context. In practice this is often used to add left padding to list items when you need extra indentation for nested content.
Combined effect (applied to a ul/ol):
- &]:pl-6” data-streamdown=“unordered-list”>
- Bullets appear inside the content box (list-inside) as discs (list-disc).
- Long list-item text wraps normally (whitespace-normal).
- Each li gets 1.5rem left padding for alignment/indentation ([li_&]:pl-6).
Note: The exact generated selector depends on how you apply the variant (e.g., on a parent/component). Ensure your Tailwind config allows arbitrary variants and that your version supports the bracketed selector variant.
Leave a Reply