list-inside list-disc whitespace-normal [li&]:pl-6
This article explains the utility and behavior of the Tailwind CSS utility cluster “list-inside list-disc whitespace-normal [li&]:pl-6”, what each part does, and practical examples for use.
What each utility does
- list-inside: Places list markers (bullets) inside the content box of the list item instead of outside, so bullets align with the first line of the item content.
- list-disc: Uses a filled circle (disc) as the list marker.
- whitespace-normal: Allows text to wrap normally and collapses consecutive whitespace characters; useful when list items contain long text that should wrap.
- [li&]:pl-6: A Tailwind arbitrary variant that targets child li elements and applies padding-left of 1.5rem (pl-6) to each li. The selector syntax [li&] places the generated selector so the rule applies to li elements under the component (equivalent to li .your-class in reversed form), ensuring consistent indentation while keeping bullets inside.
Why use this combination
- Keeps bullets visually attached to wrapped lines (list-inside) while providing consistent internal padding for better alignment of multi-line items ([li&]:pl-6).
- Ensures long list items wrap cleanly without overflowing (whitespace-normal).
- Uses a familiar disc marker (list-disc) for standard bullet lists.
When to avoid it
- &]:pl-6” data-streamdown=“unordered-list”>
- If you need the bullets outside the content box for hanging-indent style, prefer list-outside.
- If you require different marker types per nested level, combine with list-decimal or nested utility overrides.
- If you must support very old browsers that don’t understand modern CSS selectors or Tailwind arbitrary variants.
Example HTML (Tailwind)
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>This is a short item.</li> <li> This is a long list item that demonstrates wrapping behavior. The text will wrap normally, and the padding-left on each li keeps the content aligned independently of the marker. </li> <li>Another item to show consistent spacing.</li></ul>Tips
- &]:pl-6” data-streamdown=“unordered-list”>
- Combine with responsive prefixes (e.g., md:[li&]:pl-8) to increase indentation on larger screens.
- If nested lists look off, adjust the child selector to target nested lis (e.g., [li&>ul>li]:pl-4) or apply utility classes directly to nested lists.
- Use custom marker colors by pairing with marker:text-{color} in Tailwind v3+.
Quick reference
- Visual alignment: list-inside + [li&]:pl-6
- Wrapping behavior: whitespace-normal
- Marker style: list-disc
This setup offers a compact, readable bullet list with predictable indentation and good wrapping behavior for multi-line items.
Leave a Reply