Explanation of the utility class sequence
- list-inside — Places list markers (bullets) inside the content box so the marker is part of the flow; the bullet sits inside the element’s padding and affects text wrapping.
- list-disc — Sets the list-style-type to a solid disc (filled circle) for list items.
- whitespace-normal — Restores normal white-space handling: sequences of whitespace collapse, and lines wrap as needed.
- [li&]:pl- — A Tailwind arbitrary variant that targets list item elements (li) and applies left padding of 1.5rem (pl-6) to each li. The
[li&]selector matches an li wrapping the current element (the ampersand represents the element with the utility), so this adds extra left padding to list items.
Combined effect
Applied together on a parent list element (e.g., ul):
- &]:pl-6” data-streamdown=“unordered-list”>
- Bullets are rendered as discs and placed inside the content flow (list-inside + list-disc).
- Text wraps normally (whitespace-normal).
- Each list item receives 1.5rem left padding, shifting content inward while keeping the bullet inside that padded area.
Usage example (Tailwind HTML)
html
<ul class=“list-inside list-disc whitespace-normal [li_&]:pl-6”><li>Short item</li> <li>A longer item that will wrap onto multiple lines so you can see how the bullet and padding behave when wrapping occurs.</li></ul>
Leave a Reply