list-inside list-disc whitespace-normal [li&]:pl-6
What this utility class combination does
This is a set of Tailwind CSS utility classes (plus an arbitrary selector) that together control list styling, spacing, and per-list-item padding for an unordered list:
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside — places the list marker (disc) inside the content box of each list item instead of hanging outside.
- list-disc — uses a filled circle (disc) as the list marker.
- whitespace-normal — collapses and wraps whitespace normally so long list-item text wraps to the next line.
- [li&]:pl-6 — an arbitrary selector using Tailwind’s bracket syntax that applies left padding (pl-6) to an li element when the current element is inside that li. Concretely, when applied to a parent (for example a ul), it targets child li elements and adds padding-left: 1.5rem (24px).
When to use this combination
Use these classes when you want a compact vertical list where:
- &]:pl-6” data-streamdown=“unordered-list”>
- Markers sit inside each list item’s flow (useful for items with wrapped text),
- You prefer the disc style marker,
- Long lines wrap naturally,
- Each list item has consistent left padding to align content after the marker.
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 to multiple lines so you can see how the marker and padding align when text breaks onto the next line.</li> <li>Another item</li></ul>Notes and caveats
- &]:pl-6” data-streamdown=“unordered-list”>
- Browser support for Tailwind’s arbitrary selector syntax is handled at build time; ensure your Tailwind config and version support this pattern.
- If you need the marker outside the content box (so it doesn’t affect layout), use list-outside instead of list-inside.
- Adjust pl-6 to other spacing utilities if you need a different alignment (pl-4, pl-8, etc.).
Variations
- To use numbers instead of discs: replace list-disc with list-decimal.
- For no wrapping: replace whitespace-normal with whitespace-nowrap (but be mindful of overflow).
- To add vertical spacing between items: add space-y-2 to the ul.
Final tip
This combination is great for readable, well-aligned lists in interfaces like documentation, feature lists, or FAQs where wrapped text and clear alignment matter.
Leave a Reply