list-inside list-disc whitespace-normal [li&]:pl-6
This article explains the CSS utility classes in the title and shows how to use them together to style nested unordered lists for readable, compact content.
What each class does
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside — positions bullet markers inside the content box so the marker aligns with the first line of each list item.
- list-disc — uses solid disc bullets for list items.
- whitespace-normal — collapses and wraps whitespace normally so long lines wrap instead of overflowing.
- [li&]:pl-6 — a Tailwind arbitrary selector that applies padding-left (pl-6) to the li element itself when used on a parent, increasing the left inset of each list item.
Why combine them
- &]:pl-6” data-streamdown=“unordered-list”>
- Together they create compact lists whose bullets sit inside wrapped lines, with consistent left padding that improves readability for long or nested list items. This is useful in documentation, FAQs, and content blocks where line wrapping and alignment matter.
Example HTML (Tailwind CSS)
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item.</li> <li>Long item that wraps onto multiple lines to show how the bullet remains aligned with the first line and the content wraps naturally without overflow.</li> <li>Nested examples: <ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”> <li>Nested short</li> <li>Nested long item that also wraps and keeps consistent padding and marker placement.</li> </ul> </li></ul>Tips and accessibility
- Use semantic
- /
- structure for screen-reader compatibility.
- Ensure sufficient contrast between text and background; bullets inherit color from li content.
- For deep nesting, consider adjusting pl-6 to a smaller value (pl-4) to avoid excessive indentation.
When not to use
- Avoid list-inside when you need hanging indents (use list-outside).
- Don’t rely solely on arbitrary selectors if your project disallows them; prefer explicit classes on li elements.
This combination is a simple, robust pattern for tidy, wrap-friendly unordered lists in Tailwind-based projects.
Leave a Reply