list-inside list-disc whitespace-normal [li&]:pl-6
What this utility class does
This compact Tailwind-style utility string combines several CSS behaviors intended for fine-grained list styling:
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside — positions list markers (bullets) inside the content box so markers align with the first line of each list item.
- list-disc — sets the list-style-type to a disc (solid circle) for unordered lists.
- whitespace-normal — collapses whitespace and allows text wrapping, so long lines break normally.
- [li&]:pl-6 — a group variant targeting the list item element: it applies left padding of 1.5rem (pl-6) to each li by rewriting the selector to li& (i.e., matching li when used as a parent placeholder), shifting item content to the right while keeping the marker inside.
When to use it
Use this combination when you want clean, wrapped bullets with consistent indentation for multi-line list items—particularly useful in card layouts, documentation blocks, or sidebars where list items contain long sentences, inline code, or nested elements.
Visual effect and behavior
- Bullets appear just inside the left edge of each list item’s content box rather than outside the text block.
- Long lines wrap normally without preserving excessive whitespace.
- Each list item’s content is indented by 1.5rem, producing a clear visual gutter between the marker and the text body.
- For multi-line items, wrapped lines align under the first line (because the marker is inside), producing a clean block of text.
Example HTML
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>This is a short item.</li> <li> This is a longer list item that will wrap across multiple lines to demonstrate the whitespace-normal behavior and the indentation provided by [li&]:pl-6. </li> <li>Item with <code>inline code</code> and other inline elements.</li></ul>Accessibility and responsiveness
- Screen readers announce list semantics normally; keeping markers inside does not affect assistive technologies.
- The padding value (pl-6) scales predictably across breakpoints; adjust with responsive prefixes (e.g., md:[li&]:pl-8) if needed.
- If you need hanging indentation instead (wrapped lines aligned under text rather than marker), prefer using list-outside with appropriate padding/margin instead of list-inside.
Alternatives and tweaks
- &]:pl-6” data-streamdown=“unordered-list”>
- Use list-outside with pl-8 on the ul for a traditional hanging-indent look.
- Replace list-disc with list-decimal for numbered lists.
- If markers overlap content on narrow viewports, switch to smaller padding (pl-4) at smaller breakpoints.
Quick reference
- Purpose: inward bullets + wrapped, indented list items
- Good for: documentation, long list items, cards, sidebars
Leave a Reply