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 examples showing how it behaves in real HTML. Use this when you need standard disc bullets placed inside the content box, normal text wrapping, and extra left padding applied to each list item via a selector-targeted utility.
What each utility does
- list-inside: Places list markers (bullets) inside the content box of the list rather than outside. The marker sits at the start of the line and participates in the line box, which affects wrapping.
- list-disc: Uses the disc (solid circle) as the list marker.
- whitespace-normal: Enables normal white-space behavior — text wraps normally at line breaks and whitespace is collapsed.
- [li&]:pl-6: A Tailwind arbitrary selector that targets each
lichild and appliespl-6(left padding of 1.5rem). The selector[li&]compiles to a selector whereliis placed before the component class, effectively scopingpl-6to list items.
Why combine these utilities
- When
list-insideis used, long list item text wraps under the bullet, which can make the text appear indented inconsistently. Addingpl-6to eachliensures a consistent left spacing so wrapped lines align visually with the text, improving readability. - whitespace-normal ensures text wraps as expected; without it, other whitespace rules might prevent wrapping or cause unexpected layout.
- The arbitrary selector keeps the padding scoped to
lielements without needing extra CSS or a wrapper class.
Example HTML
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li> This is a short item. </li> <li> This is a much longer list item that will wrap onto multiple lines to demonstrate how the bullet and the padded content align when using list-inside and per-item padding. </li> <li> Another item with <strong>inline formatting</strong> and enough text to wrap across lines for visual testing. </li></ul>Visual notes & behavior
- &]:pl-6” data-streamdown=“unordered-list”>
- The bullet appears at the start of the first line of each item.
- Wrapped lines align with the padded content (1.5rem from the left edge) rather than beneath the bullet.
- Items with inline elements (like strong, code, or links) continue to wrap normally due to
whitespace-normal.
Accessibility considerations
- Keep list semantics (use ul/ol and li) to maintain screen reader compatibility.
- Ensure contrast and font sizes are adequate; padding doesn’t affect semantic meaning but affects visual alignment.
- If you need precise control over marker placement for RTL languages, test in both LTR and RTL contexts.
When not to use
- If you prefer markers outside the content box (traditional hanging indent), use
list-outsideinstead oflist-inside. - If you want bullets to align with the left edge of the container without extra padding, omit the
[li&]:pl-6utility.
Alternatives
- &]:pl-6” data-streamdown=“unordered-list”>
- Use
pl-6on the ul itself andlist-outsidefor a hanging indent effect. - Use custom CSS with
::markerfor advanced marker styling (color, size). - For complex designs, wrap item text in a child element and apply padding/margins to that child instead of using arbitrary selectors.
Summary
list-inside list-disc whitespace-normal [li_&]:pl-6 is a compact, Tailwind-based approach for creating disc lists with inside markers, normal wrapping, and consistent per-item left padding so wrapped lines align cleanly with the item content.
Leave a Reply