list-inside list-disc whitespace-normal [li&]:pl-6
This CSS utility combination fine-tunes list appearance for readable, well-aligned list items. It’s useful when you want standard disc bullets placed inside the text flow, preserve normal whitespace wrapping, and add precise left padding for list items matching a specific selector pattern.
What each class does
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside — places the bullet inside the content box so the bullet aligns with the first line of text rather than hanging in the margin.
- list-disc — uses filled circle (disc) markers for list items.
- whitespace-normal — allows text to wrap normally; collapses sequences of whitespace and enables line breaks.
- [li&]:pl-6 — an arbitrary variant targeting list item elements (selector pattern li& maps to li& or similar depending on your utility framework). It applies left padding (pl-6) specifically to matching li elements, shifting item contents right by the equivalent of 1.5rem (assuming a 4px base, Tailwind default scale).
Usage scenario
Use this combination for multi-line list items where bullets should stay with the first line, and you want extra horizontal spacing for the list item content so wrapped lines align nicely under the text (not under the bullet).
Example HTML
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item</li> <li> A longer list item that wraps across multiple lines to demonstrate how the bullet stays inside and the additional left padding keeps wrapped lines aligned. </li> <li>Another item</li></ul>Notes & tips
- &]:pl-6” data-streamdown=“unordered-list”>
- If bullets overlap long lines, try increasing padding (e.g., pl-8) or use list-outside with a left margin instead.
Leave a Reply