p]:inline” data-streamdown=”list-item”>How to Improve Performance When Using MaskImage in Web Apps

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, why you might use them together, common use cases, and tips for accessible, maintainable markup.

What each utility does

• list-inside — Places list markers (bullets) inside the content box so the bullet participates in the line box and aligns with wrapped lines.
• list-disc — Uses a solid circular bullet for unordered lists.
• whitespace-normal — Restores normal whitespace handling: sequences of whitespace collapse and lines wrap as needed.
• [li&]:pl-6 — An arbitrary selector in Tailwind that targets li when the current selector is an li parent pattern; it applies padding-left: 1.5rem (pl-6) to the matched element(s). Concretely this pattern is useful when you want to apply padding to list items via your component selector (see examples below).

Note: The arbitrary selector syntax [li&]:pl-6 leverages Tailwind’s variant feature where the bracketed portion is interpreted as a raw CSS selector wrapping the generated class. The exact selector semantics depend on Tailwind’s version and configuration; the example here expresses the intent: add left padding to list items.

Why combine these

• Putting the bullet inside (list-inside) keeps bullets aligned with wrapped lines, producing compact, tidy lists for narrow containers or multi-line items.
• whitespace-normal ensures long list content wraps instead of preserving extra spaces or preventing breaks.
• Adding left padding to li (pl-6) creates consistent indentation so text doesn’t collide with the bullet and improves readability.
• list-disc provides the visual bullet style most readers expect.

When to use this combo

• Multi-line list items where wrapped lines should align under the text (not under the bullet).
• Compact UI components (cards, sidebars) where you want bullets inside the content area.
• When list items include long sentences, inline code, or small UI elements and you need consistent left padding to separate bullets from content.
• Responsive components where default browser list styles create uneven alignment.

Accessibility and semantics

• Use a semantic
  with
  • children; do not rely solely on visual styling for meaning.
  • Ensure sufficient contrast for list text and any custom bullet color.
  • If you replace bullets with icons or custom elements, maintain a text-equivalent (e.g., visually hidden text) for screen readers if necessary.

Example HTML (Tailwind classes)

<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item stays on one line.</li>  <li>This is a longer list item that will wrap across multiple lines and remain aligned neatly beneath the text rather than the bullet.</li>  <li>Item with <code>inline code</code> and additional content that benefits from padding-left to avoid visual crowding.</li></ul>