list-inside list-disc whitespace-normal [li&]:pl-6
What this utility combination does
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside: keeps list markers (discs) inside the content box so bullets align with wrapped lines.
- list-disc: sets the marker style to solid discs.
- whitespace-normal: allows normal wrapping of text (collapses whitespace and wraps at spaces).
- [li&]:pl-6: applies padding-left: 1.5rem (Tailwind’s pl-6) to each li element via arbitrary selector using the ampersand placeholder.
Why use it
- &]:pl-6” data-streamdown=“unordered-list”>
- Keeps bullets visually aligned with wrapped lines.
- Adds consistent left padding for better readable indentation.
- Ensures long list items wrap cleanly instead of overflowing or keeping odd spacing.
Example HTML
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 sits inside the block and how the padding-left keeps the wrapped lines aligned under the text rather than under the bullet.</li> <li>Another item</li></ul>Notes and tips
- Use list-inside when you want markers inside the flow; use list-outside when you prefer markers outside the content box.
- p]:inline” data-streamdown=“list-item”>If bullets still misalign in certain browsers, consider adjusting line-height or using a custom marker via ::marker with padding/margin.
Leave a Reply