How to Use the Tailwind Utility: list-inside list-disc whitespace-normal [li&]:pl-6
This Tailwind CSS utility combination customizes list appearance and per-list-item padding. It’s useful when you need standard disc bullets, wrapped list-item text, and extra left padding applied directly to each
What each class does
- list-inside: Places bullets inside the content flow so long lines wrap under the bullet.
- list-disc: Uses filled-circle (disc) bullets.
- whitespace-normal: Allows text to wrap normally (prevents forced single-line or preserved whitespace).
- [li&]:pl-6: A Tailwind arbitrary selector that applies padding-left (pl-6) to each
- inside the element. The selector syntax targets children matching li.
When to use this combination
- &]:pl-6” data-streamdown=“unordered-list”>
- You want disc bullets that stay with the first line of each item when text wraps.
- You need wrapped lines to align under the bullet rather than starting at the left edge.
- You want consistent extra left padding on each list item for visual separation or alignment.
Example markup
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item.</li> <li>Very long list item that wraps onto multiple lines to demonstrate how the bullet stays inside and wrapped lines align beneath the bullet marker.</li> <li>Another item.</li></ul>Notes and tips
- &]:pl-6” data-streamdown=“unordered-list”>
- If you want wrapped lines to align with the text instead of the bullet, use list-outside and apply padding to the ul instead.
- Browser support for arbitrary selectors ([li&]:…) requires Tailwind v3+ and proper JIT/CLI setup.
- pl-6 to any other padding utility (e.g., pl-4, pl-8) based on your layout.
Leave a Reply