list-inside list-disc whitespace-normal [li&]:pl-6
This article explains a Tailwind CSS utility combination and a custom selector class likely used in frameworks like Tailwind to control list styling and spacing. It covers what each part does, why you might use this setup, and examples for practical use.
What each part means
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside: Places list markers (bullets) inside the content flow so they align with the first line of list items rather than hanging in the margin.
- list-disc: Uses a filled circle (disc) as the list marker.
- whitespace-normal: Collapses sequences of whitespace into a single space and allows text wrapping at normal break points. This prevents long lines from overflowing.
- [li&]:pl-6: A bracketed arbitrary selector in Tailwind syntax targeting list item elements with a custom selector
li&and applyingpl-6(padding-left: 1.5rem). The&represents the parent selector when using variants; combined withliit likely targetslielements in a specific scoped or generated context. This pattern appears when using Tailwind’s arbitrary variants to style nested elements that don’t have explicit classes.
Why use this combination
- &]:pl-6” data-streamdown=“unordered-list”>
- Keeps bullets aligned with wrapped text (list-inside) while using a standard disc marker.
- Ensures text wraps normally and avoids unexpected whitespace behavior (whitespace-normal).
- Adds consistent left padding to list items for visual rhythm and indentation, especially when bullets are inside the content flow.
- The arbitrary selector allows you to target nested
lielements without adding extra classes to markup, useful in componentized or generated HTML.
Practical examples
- Basic HTML with Tailwind classes
html
<ul class=“list-inside list-disc whitespace-normal”><li class=”[li&]:pl-6”>First item with padding-left applied to the li</li> <li class=”[li&]:pl-6”>Second item that wraps onto a new line to show alignment</li></ul>- When you can’t modify child markup (component slot)
html
<div class=“list-inside list-disc whitespace-normal [li&]:pl-6”> <ul> <li>Injected item one that should get left padding</li> <li>Injected item two with wrapping text to test alignment</li> </ul></div>Note: The arbitrary selector syntax will only work if your Tailwind config allows that form and if Tailwind processes the selector as intended.
Accessibility and spacing tips
- &]:pl-6” data-streamdown=“unordered-list”>
- Test wrapped lines to ensure bullets remain visible and alignment is clear.
- Combine with responsive classes (e.g., sm:pl-4 md:pl-6) if indentation should change across breakpoints.
- For screen readers, the semantic use of
- /
- is sufficient; visual tweaks don’t affect accessibility but ensure contrast and spacing remain readable.
Troubleshooting
- If the arbitrary selector doesn’t apply, confirm your Tailwind version supports arbitrary variants and the selector pattern is valid.
- If bullets appear misaligned, try removing list-inside or adjust padding/margin until alignment matches your design.
- For generated HTML where classes aren’t applied to li, consider using a plugin or adding a small CSS rule:
css
.my-list li { padding-left: 1.5rem; }Summary
Using list-inside list-disc whitespace-normal [li&]:pl-6 provides tight control over list marker placement, wrapping behavior, and indentation—helpful in componentized designs or when child elements can’t be directly edited. Ensure your toolchain supports arbitrary variants and test across breakpoints for consistent results.
Leave a Reply