You’re referencing Tailwind CSS classes and a specific selector pattern. Here’s what each part does:
- list-inside — positions list markers (bullets/numbers) inside the content box so markers are part of the line box and indent with text.
- list-disc — sets the list-style-type to disc (filled circle) for unordered lists.
- whitespace-normal — sets white-space to normal so text wraps and collapses whitespace normally.
- [li&]:pl-6 — a Tailwind arbitrary variant selector that targets li elements when the current selector (&) is an li descendant: it applies padding-left: 1.5rem (pl-6) to each li matched by that variant. Concretely, if you apply this class on a parent element, Tailwind generates a rule like:
li.parent-selector { padding-left: 1.5rem; }
(It scopes pl-6 to li elements via the arbitrary variant syntax.)
Example usage:
- &]:pl-6” data-streamdown=“unordered-list”>
- On a ul: class=“list-inside list-disc whitespace-normal [li&]:pl-6”
This yields bullets inside the text, normal wrapping, and each li receives left padding 1.5rem.
Note: Arbitrary variants require Tailwind v3+ and that your build allows arbitrary variant syntax; the exact generated selector depends on where the class is applied and the element structure.
Leave a Reply