list-inside list-disc whitespace-normal [li&]:pl-6
What this utility class combo does
This Tailwind CSS utility string targets list styling and spacing:
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside — places list marker (bullet) inside the content box so text wraps under the marker.
- list-disc — uses a solid disc as the list marker.
- whitespace-normal — allows normal wrapping and collapses sequences of whitespace
- [li&]:pl-6 — applies left padding of 1.5rem (pl-6) to any li element that matches the arbitrary variant selector
li&(commonly used to scope styles when the list is nested inside a parent selector).
When to use it
Use this combo when you want visually compact lists where bullets sit inside the content flow, list items wrap naturally, and list items receive consistent left padding for alignment—especially useful in nested or component-scoped styles.
Example HTML
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item</li> <li>A longer list item that wraps onto a second line so you can see how the bullet and padding interact with wrapped text.</li> <li>Another item</li></ul>Visual behavior notes
- With list-inside, wrapped lines align under the text, not under the bullet.
- pl-6 on li shifts the content right, improving alignment when bullets overlap or when nested lists need clearer indentation.
- whitespace-normal prevents unexpected overflow by allowing natural line breaks
Accessibility tips
- &]:pl-6” data-streamdown=“unordered-list”>
- Keep list text concise for easier scanning by screen readers
- Ensure sufficient contrast between text and background regardless of list styling.
- If nesting lists, consider increasing indentation or switching marker types (e.g., list-decimal) for clarity.
Alternatives and tweaks
- &]:pl-6” data-streamdown=“unordered-list”>
- Use list-outside if you prefer the marker outside the content block (default behavior).
- Replace list-disc with list-decimal for numbered lists.
- Adjust padding (pl-4, pl-8) to match your layout rhythm.
Leave a Reply