You’re referencing a set of utility classes that look like Tailwind CSS (or a Tailwind-like system) combined with a custom attribute selector [li&]:pl-6. Here’s a concise explanation and example.
What each part does
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside: places list markers (bullets/numbers) inside the content box so they align with text and affect layout.
- list-decimal: uses decimal numbers for ordered lists (1., 2., 3.).
- whitespace-normal: collapses whitespace and wraps text normally
- [li&]:pl-6: an attribute selector variant targeting list item elements with a specific parent/selector pattern — likely a custom variant that applies padding-left:1.5rem (Tailwind’s pl-6) to matching elements. The syntax suggests a variant where the selector is generated by replacing & with the li element (or applying styles to li when a parent has attribute li). Effectively it adds left padding to list items that match the selector.
Example (Tailwind-like HTML)
- &]:pl-6” data-streamdown=“unordered-list”>
- First item with normal wrapping and inside decimal marker
- Second item with extra left padding from [li&]:pl-6
Notes
- &]:pl-6” data-streamdown=“unordered-list”>
- [li&]:pl-6 is not standard Tailwind out of the box; it looks like a custom arbitrary variant or plugin. In Tailwind v3+ you can use arbitrary variants like [selector]:utility, but the selector must be valid CSS. Confirm your build setup (postcss/tailwind.config.js) supports that variant.
- If you want every li to have padding-left, simpler: ul > li { padding-left: 1.5rem } or use Tailwind’s children plugin or apply pl-6 directly on li elements (e.g.,
Leave a Reply