list-inside list-disc whitespace-normal [li&]:pl-6
What it means
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside: Places list markers (bullets) inside the content box so text wraps underneath the marker rather than aligned under the marker outside the content.
- list-disc: Uses filled circle bullets for list items.
- whitespace-normal: Collapses whitespace and allows normal wrapping of text.
- [li&]:pl-6: A Tailwind-style arbitrary selector applying left padding (pl-6) to list item elements that include an ampersand in their selector context — effectively adding left padding to each li when using this selector pattern.
When to use it
- &]:pl-6” data-streamdown=“unordered-list”>
- Use this combination when you want bulleted lists whose bullets sit inside the content flow and whose items wrap normally, while also adding extra left padding to list items via the custom selector for alignment or visual spacing.
Example HTML/CSS (Tailwind-style)
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item that wraps when necessary.</li> <li>Longer item that demonstrates how the text wraps under the bullet and respects the normal whitespace rules, with added left padding for alignment.</li> <li>Another item showing consistent spacing between bullets and content.</li></ul>Tips
- &]:pl-6” data-streamdown=“unordered-list”>
- If bullets appear misaligned, try
list-outsideinstead or adjust padding on the list itself. - For consistent vertical spacing, combine with
space-y-2on the ul.
Leave a Reply