list-inside list-disc whitespace-normal [li&]:pl-6
What the class string means (Tailwind CSS)
This class string is a compact Tailwind CSS utility composition that targets list styling and list-item padding. Broken down:
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside — places list markers (bullets) inside the content flow so they align with the first line of the list item rather than hanging outside.
- list-disc — uses a filled circle (disc) as the list marker.
- whitespace-normal — collapses consecutive whitespace and allows wrapping at normal break points (the browser default behavior).
- [li&]:pl-6 — a bracketed arbitrary variant that applies
pl-6(padding-left: 1.5rem) specifically to list item elements (li) when they match the generated selectorli&. In practice this arranges additional left padding for each list item.
Why you’d use this combination
- To create compact bulleted lists where bullets line up with wrapped lines of text (list-inside) while still adding consistent left indentation to the item content (pl-6).
- To ensure line-wrapping behaves predictably (whitespace-normal) so long list items don’t create unexpected spacing.
- To get a classic disc-style bullet without custom markers.
How it affects layout and accessibility
- Visual alignment: With bullets inside and padding on the list items, wrapped text aligns under the bullet area, improving readability for multi-line items.
- Screen readers: Semantic HTML (ul/li) remains intact; these utility classes only change presentation, so assistive tech still perceives a proper list.
- Focus and selection: Extra padding can improve click/tap targets for interactive list items.
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 demonstrate the alignment and padding behavior of the utility classes applied here.</li> <li>Another item</li></ul>Tips and caveats
- &]:pl-6” data-streamdown=“unordered-list”>
- Browser defaults: list-inside changes how markers interact with wrapping; test across browsers to confirm visual alignment.
- Responsiveness: pl-6 is a fixed spacing; consider responsive variants (e.g., md:pl-8) if you need different indentation on larger screens.
- Alternative approaches: If you need hanging bullets (marker outside), use
list-outsideand adjust margin/padding on the ul instead. - Utility specificity: The arbitrary variant syntax ([li_&]:pl-6) may be uncommon—ensure your Tailwind config and version support it; otherwise, apply padding directly to li elements via a class on li or a nested selector in your CSS.
Summary
This utility set gives you disc bullets placed inside the text flow, predictable wrapping, and explicit left padding on list items—useful for readable, well-aligned bulleted lists, especially when items wrap onto multiple lines.
Leave a Reply