list-inside list-disc whitespace-normal [li&]:pl-6
This article explains the CSS/Tailwind utility combination shown in the title — what each part does, why you might use it, and practical examples for common HTML list layouts.
What the classes mean
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside: Places list markers (bullets) inside the content box so bullets appear inline with the first line of each list item rather than hanging outside.
- list-disc: Uses filled circle bullets for list markers.
- whitespace-normal: Restores normal whitespace handling (collapses sequences of whitespace and wraps text), useful when other utilities or content might prevent wrapping.
- [li&]:pl-6: A Tailwind arbitrary variant that targets the li element and applies padding-left 1.5rem (pl-6) to it; the
&represents the selector itself. In practice this adds left padding to each list item via a generated CSS rule likeli:pl-6(note: Tailwind emits a selector combining the element with the generated class).
Why combine these
- &]:pl-6” data-streamdown=“unordered-list”>
- Use this combination when you want standard disc bullets that sit inline with text, ensure long lines wrap normally, and you need consistent left padding on each list item for visual alignment or to make room for long bullets or nested content.
Example HTML
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item</li> <li>This is a longer list item that will wrap onto multiple lines and should maintain normal whitespace wrapping behavior so the text flows neatly.</li> <li>Item with <strong>inline formatting</strong> and normal wrapping.</li></ul>Notes and pitfalls
- &]:pl-6” data-streamdown=“unordered-list”>
- Some older browsers or strict setups may not support certain arbitrary variant selectors; ensure your Tailwind config allows arbitrary variants and your build supports them.
- If you want bullets outside the content box, use list-outside instead of list-inside.
- Padding on li affects the bullet when using list-inside; if you need the bullet aligned differently from the text, consider using pseudo-elements for custom markers.
Alternatives
- For custom markers, remove list-disc and use CSS pseudo-elements:
css
ul.custom > li { list-style: none; padding-left: 1.5rem; position: relative;}ul.custom > li::before { content: “•”; position: absolute; left: 0;}- For tighter control with Tailwind, use
[&>li]:pl-6if you prefer a parent-child selector variant.
Quick checklist
- ✅ Use when you want inside bullets with wrapping.
- ✅ Add li padding for alignment.
- ⚠️ Ensure Tailwind build supports arbitrary variants.
If you want, I can generate variations (e.g., nested lists, numbered styles) or a ready-to-use component with responsive tweaks.
Leave a Reply