list-inside list-disc whitespace-normal [li&]:pl-6
What this utility-class combination does
This string looks like a set of Tailwind CSS utility classes combined with a bracketed arbitrary selector. It configures list behavior and spacing for nested list items:
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside: places list markers (bullets) inside the content box so markers align with the first line of each list item rather than hanging outside.
- list-disc: uses solid disc bullets for unordered lists.
- whitespace-normal: collapses whitespace and wraps text normally (restores default wrapping and spacing).
- [li&]:pl-6: an arbitrary selector that applies padding-left: 1.5rem (pl-6) to any li elements when the current element is a parent — it targets nested list items using the selector li& (which compiles to li.parent-selector). Practically, this nudges inner list items right to create clearer nesting.
When to use it
Use this combination when you want neat, readable unordered lists where:
- Bullets stay attached to lines of text (not hanging).
- Nested list items are indented consistently.
- Text wraps naturally without preserving extra whitespace.
Example HTML
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>First item with a long sentence that wraps onto a second line to show bullet alignment.</li> <li> Parent item <ul> <li>Nested item one</li> <li>Nested item two with more text to demonstrate the added left padding.</li> </ul> </li> <li>Third item</li></ul>Accessibility and responsiveness
- &]:pl-6” data-streamdown=“unordered-list”>
- Bullets inside the content are generally better for readability on narrow screens because they prevent large left gutters.
- Ensure sufficient color contrast between bullets and background.
- Test on small viewports to confirm wrapping behaves as expected; adjust pl- value if nested items need more or less indentation.
Quick tips
- Swap list-disc for list-decimal for numbered lists.
- If nested bullets still look cramped, use a larger padding (e.g., [li&]:pl-8).
- For tighter control, combine with responsive prefixes (sm:[li&]:pl-4 md:[li_&]:pl-6).
Conclusion
This Tailwind utility mix is a concise, effective way to control list marker placement, wrapping, and nested-item indentation—ideal for readable, responsive lists in modern UIs.
Leave a Reply