list-inside list-disc whitespace-normal [li&]:pl-6
This article explains the CSS/Tailwind-style utility string “list-inside list-disc whitespace-normal [li&]:pl-6”, what each part does, how they work together, when to use them, and practical examples.
What each part means
- list-inside: Place list markers (bullets) inside the content box so the marker sits within the text flow rather than hanging in the margin. Useful when you want bullets aligned with wrapped lines.
- list-disc: Use a filled circle (disc) as the list marker type for unordered lists.
- whitespace-normal: Collapse whitespace and allow text wrapping at normal break points; prevents preservation of line breaks or multiple spaces.
- [li&]:pl-6: A Tailwind arbitrary selector that targets list item elements when they match the pattern
li&. In practice this is used with Tailwind’s arbitrary variants to apply padding-left (pl-6) to selected elements — commonly intended to add left padding to list items when using specific markup or custom selector patterns.
How they work together
Combining these utilities yields an unordered list with disc bullets displayed inside the content box, normal whitespace handling so long lines wrap naturally, and extra left padding applied to list items via an arbitrary variant selector. The padding ensures bullets and wrapped lines have visually consistent indentation when necessary.
When to use this combo
- You want bullets aligned with wrapped text (no hanging bullets).
- You need normal text wrapping inside list items (not preformatted).
- You want extra left padding on list items to improve readability or match design spacing, but only in contexts where your arbitrary selector applies.
Practical examples
- Basic HTML with Tailwind classes (most straightforward):
<ul class=“list-inside list-disc whitespace-normal pl-6”><li>First item with a long sentence that wraps onto multiple lines to show how the bullet aligns with wrapped text.</li> <li>Second item demonstrating spacing.</li> <li>Third item.</li></ul>Note: This uses pl-6 directly on the ul so all list items receive the left padding.
- Using an arbitrary variant to target li elements (advanced Tailwind):
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”> <li>Item one with wrapping text to demonstrate padding applied via arbitrary selector.</li> <li>Item two.</li></ul>Explanation: The arbitrary variant [li&]:pl-6 tells Tailwind to generate a rule that applies pl-6 when the selector matches (commonly resolving to li ul or a custom match depending on how the selector is interpreted). Use this when you prefer not to add padding directly to the parent element.
Accessibility and layout notes
- Using list-inside keeps bullets close to text which can aid readability for wrapped lines, but ensure contrast and spacing remain sufficient for users with low vision.
- For consistent alignment across browsers, test wrapped lines—some browsers handle marker positions differently.
- If you need hanging bullets (marker outside), use list-outside instead.
Troubleshooting
- If
[li&]:pl-6appears to not apply, verify your Tailwind version supports arbitrary variants and that the selector pattern matches your DOM structure. - When bullets overlap text after adding padding, increase pl value or add margin to li elements instead.
Quick reference
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside: bullets inside content
- list-disc: filled circle bullets
- whitespace-normal: allow normal text wrapping
- [li&]:pl-6: apply left padding to targeted li elements via Tailwind arbitrary variant
That’s the concise guide to using “list-inside list-disc whitespace-normal [li&]:pl-6” effectively.
Leave a Reply