You’re asking about a Tailwind CSS–style utility string: “list-inside list-disc whitespace-normal [li&]:pl-6”. Here’s what each part does and how they interact:
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside — Places list markers (bullets) inside the content box of list items (so the marker sits within the list item padding instead of hanging outside).
- list-disc — Uses filled-circle bullets for list items.
- whitespace-normal — Collapses whitespace and wraps text normally (default line-wrapping behavior).
- [li&]:pl-6 — A custom arbitrary selector variant that applies padding-left: 1.5rem (pl-6) to the li when the parent selector matches the generated pattern. Tailwind interprets [li&] as a raw selector where ampersand (&) is replaced by the current component/class selector; the resulting CSS targets li within that element. Concretely it generates a rule like:
.your-class > li { padding-left: 1.5rem; }
(Actual combinator depends on how Tailwind resolves [li&]; commonly it becomes li.your-class or .your-class li — check your build output.)
Notes and gotchas:
- &]:pl-6” data-streamdown=“unordered-list”>
- Using list-inside with added left padding on li can shift bullets inward and affect alignment; if you want hanging bullets, use list-outside instead and adjust margin/padding on the ul.
- The arbitrary variant [li&] requires Tailwind v3+ and enabling arbitrary variants (default enabled). Ensure your content is scanned by the Tailwind parser so the selector isn’t purged.
- The exact generated selector for [li&] depends on escaping and build; inspect the compiled CSS if precise specificity matters.
Leave a Reply