p]:inline” data-streamdown=”list-item”>Extensions Update Notifier — Simplify Browser Add-on Monitoring

list-inside list-disc whitespace-normal [li&]:pl-6

This article explains the Tailwind CSS utility combination list-inside list-disc whitespace-normal [li&]:pl-6, what each part does, when to use it, and practical examples.

What this combination means

• list-inside — Positions list markers (bullets) inside the content flow so the bullet sits within the element’s padding and is aligned with the text.
• list-disc — Uses a filled circle (disc) as the list marker.
• whitespace-normal — Allows text to wrap normally; collapses consecutive whitespace and breaks lines at normal wrapping points.
• [li&]:pl-6 — A Tailwind arbitrary selector that targets child li elements and applies padding-left: 1.5rem (pl-6) to each li. The selector syntax [li&] scopes the rule so it generates CSS like li .your-class depending on context; in this case it ensures padding is applied to list items.

Why use this combination

• Keeps bullets visually aligned with wrapped text while adding extra left padding to list items for better spacing.
• Ensures long list items wrap normally without preserving extra whitespace.
• Useful for lists inside cards, sidebars, or any component where you want compact bullets but clearer indentation on each item.

When to avoid it

• If you need hanging bullets (marker outside the text block), use list-outside instead.
• If you require precise control across browsers for marker positioning, consider custom CSS with ::marker and padding/margin adjustments.

Example HTML

<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item</li>  <li>Long item that will wrap across multiple lines to demonstrate how the bullet aligns with wrapped text and how additional left padding improves readability.</li>  <li>Another item</li></ul>