list-inside list-disc whitespace-normal [li&]:pl-6
This article explains a specific Tailwind CSS utility combination and how to use it to create nested lists with consistent spacing and indentation. It’s aimed at frontend developers who want predictable list styling in complex layouts.
What the classes do (brief)
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside — Places list markers (bullets) inside the content flow so they appear within the padding of the list.
- list-disc — Uses filled circle bullets for list items.
- whitespace-normal — Collapses and wraps whitespace normally (respects standard text wrapping).
- [li&]:pl-6 — A Tailwind arbitrary selector that targets each li element (the ampersand refers to the li) and applies padding-left: 1.5rem (pl-6) to them.
Why use this combination
- &]:pl-6” data-streamdown=“unordered-list”>
- Keeps bullets aligned with wrapped text when list items are multi-line.
- Ensures each list item has left padding so nested content or custom markers don’t collide with the bullet.
- Lets you maintain normal whitespace behavior inside list items (no unexpected nowrap or collapse).
Example HTML
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li> This is a list item that wraps onto multiple lines to show how the bullet sits inside the padding and how text wraps normally without collapsing whitespace. </li> <li> Another item with longer content that demonstrates consistent indentation across items. </li> <li> Nested list example: <ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”> <li>Nested item one</li> <li>Nested item two with more content to wrap onto a second line.</li> </ul> </li></ul>Notes and tips
- Browser rendering: list-inside can affect how bullets are positioned across browsers; test in Chrome, Firefox, and Safari.
- Accessibility: keep sufficient contrast and reasonable line-height so list items remain readable when wrapped.
- If you prefer bullets outside the content block, use list-outside instead of list-inside.
- Adjust pl-6 to other spacing utilities (pl-4, pl-8) depending on your design system.
When to avoid
- If you rely on the default browser marker alignment for complex nested lists, forcing inside placement may break expected alignment.
- When list items contain interactive elements that need different focus/indentation behavior—apply padding selectively with more specific selectors.
Conclusion
Combining list-inside, list-disc, whitespace-normal, and the arbitrary selector [li&]:pl-6 gives you tight control over list marker placement, wrapping behavior, and per-item padding—useful for clean, multi-line list layouts in Tailwind CSS.
Leave a Reply