list-inside list-disc whitespace-normal [li&]:pl-6
What this utility-class combination does
This set of Tailwind-style utility classes controls list appearance and spacing
- list-inside: Places the list marker (bullet) inside the content box so the marker is part of the text flow rather than hanging in the left margin.
- list-disc: Uses a filled circle (disc) as the list marker.
- whitespace-normal: Collapses consecutive whitespace and allows lines to wrap normally.
- [li&]:pl-6: A custom/variant-like selector that applies left padding of 1.5rem (pl-6) to each li element when the parent rule matches; roughly equivalent to applying pl-6 to each list item via a scoped selector.
Why you might use this combination
- &]:pl-6” data-streamdown=“unordered-list”>
- Improved readability: Keeping the bullet inside the content (list-inside) helps bullets align with wrapped lines.
- Consistent spacing: Applying pl-6 to each list item ensures the text is offset from the marker, creating a clean left gutter.
- Responsive text flow: whitespace-normal ensures words wrap naturally, preventing odd gaps.
- Scoped styling: The bracketed variant lets you target child li elements without adding extra classes to every li.
Example usage
- Use for documentation lists, feature lists, or any content where bullets and wrapped lines need tidy alignment.
- Combine with typography utilities (text-sm, leading-relaxed) for better legibility.
Accessibility considerations
- Ensure sufficient contrast for list text.
- Avoid relying on bullets alone to convey structure; use headings and semantic HTML where appropriate.
Quick code example
html
<ul class=“list-inside list-disc whitespace-normal [li_&]:pl-6”><li>First item with a wrapped line that demonstrates how the marker stays inside the flow.</li> <li>Second item showcasing the pl-6 padding applied to the li.</li></ul>
Leave a Reply