list-inside list-disc whitespace-normal [li&]:pl-6
What this utility class combination does
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside: places list markers (bullets) inside the content flow so they align with the first line of each list item.
- list-disc: uses solid circular bullets.
- whitespace-normal: collapses and wraps whitespace normally, allowing long lines to wrap.
- [li&]:pl-6: applies left padding (pl-6) to each list item; the [li&] syntax targets the li element itself in a utility-first CSS system
When to use it
- &]:pl-6” data-streamdown=“unordered-list”>
- When you need bullets aligned with wrapped text while keeping consistent left padding on each item.
- In responsive layouts where list items may wrap across lines and you want readable indentation.
- For nested lists where child items require additional left offset without changing the marker position.
Example HTML
Short item A longer list item that will wrap onto multiple lines so you can see how the bullets align with the first line and how the padding affects the wrapped lines. Another item Notes and tips
- If you want bullets outside the content block with the same padding effect, use
list-outsideand adjust container padding instead. - Ensure your CSS framework supports the arbitrary variant syntax
[li_&]:…(e.g., Tailwind CSS JIT). If not supported, apply a simple rule likeul.custom li { padding-left: 1.5rem; }. - space-y-2 or similar utilities to control vertical spacing between items without altering padding.
Leave a Reply