You’re referencing Tailwind CSS-style utilities and a custom selector. Here’s what each part means and how they work together:
- list-inside — sets list-style-position: inside; (bullets/markers placed inside the content box, affecting wrapping)
- list-disc — sets list-style-type: disc; (filled circle bullets)
- whitespace-normal — sets white-space: normal; (allow wrapping, collapse spaces)
- [li&]:pl-6 — a variant using Tailwind’s arbitrary selector syntax. It targets an element when an ancestor matches the selector “li&” and applies padding-left: 1.5rem (pl-6). Specifically:
- In Tailwind arbitrary variant form [selector]:utility, the selector replaces & with the current element.
- “li&” becomes a selector meaning an li element immediately followed by the current element? Actually “li&” is literal: Tailwind will produce a CSS rule with selector li where underscores are escaped characters; common intent is to use sibling or descendant selectors like li>& or li &. As written it’s ambiguous/likely invalid — underscores are not combinators.
- Correct patterns: [li>&]:pl-6 (targets element when direct child of li), [li&]:pl-6 (targets when li immediately adjacent — rarely used). Use proper combinators:
- &]:pl-6” data-streamdown=“unordered-list”>
- [li>&]:pl-6 → CSS selector li > .yourclass { padding-left:1.5rem; }
- [li+&]:pl-6 → when immediately after an li sibling
- [li~&]:pl-6 → when later sibling of an li
- [li&]:pl-6 is probably a mistake; replace underscore with a space or combinator.
Practical intent: combine list-inside + list-disc + whitespace-normal on a UL/OL to create standard bulleted list with wrapped lines. Then apply pl-6 to child content (e.g., a div or paragraph inside li) when it’s within/adjacent to an li so text aligns under the bullet. Correct example:
- Long text that wraps and aligns with bullet
Or with Tailwind arbitrary variant to target a direct child span:
- Text…
Use [&>span]:pl-6 (or li>& variant on ancestor) rather than li&.
Leave a Reply