list-inside list-disc whitespace-normal [li&]:pl-6
This article explains what the Tailwind CSS utility class string “list-inside list-disc whitespace-normal [li&]:pl-6” does, why you might use it, and how to apply it in real-world scenarios.
What each utility does
- list-inside: Places list markers (bullets) inside the list item’s content box so bullets align with the first line of text.
- list-disc: Uses solid disc bullets for unordered lists.
- whitespace-normal: Collapses sequences of whitespace and wraps text normally (resets nowrap/pre behavior).
- [li&]:pl-6: Uses Tailwind’s arbitrary variant syntax to add left padding (pl-6) to each li element that contains the current element as a descendant — effectively applies padding-left to list items that match the selector pattern. It targets list items in contexts where the component is nested; this variant ensures extra left padding on list items.
Why use this combination
- &]:pl-6” data-streamdown=“unordered-list”>
- Ensures bullets visually align with wrapped text by keeping the marker inside the content box.
- Provides consistent wrapping and spacing for long list items via whitespace-normal.
- Adds extra left padding to list items so nested content or custom markers don’t overlap or so content lines up neatly.
When to prefer it
- Multi-line list items where you want the bullet to align with the first text line.
- UI components where list items need extra left padding for visual hierarchy or to accommodate icons.
- When using componentized CSS where you want to target child li elements specifically with padding using Tailwind’s arbitrary variant.
Example usage
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 wraps to a second line so you can see how the bullet aligns and how the additional left padding affects wrapped lines.</li> <li>Nested content: <ul class=“list-inside list-disc whitespace-normal [li&]:pl-4”> <li>Nested item one</li> <li>Nested item two with a longer line that wraps</li> </ul> </li></ul>Notes and alternatives
- If you want the marker outside the content box (default browser behavior), use list-outside instead of list-inside.
- If the arbitrary variant selector
[li&]:pl-6doesn’t work in your Tailwind setup, ensure arbitrary variants are enabled and your Tailwind version supports this selector pattern. Alternatively, apply a class directly to li elements (e.g.,li:pl-6or add a utility class on li tags). - For consistent spacing with icons, consider
pl-8or custom spacing depending on icon width.
Troubleshooting
- &]:pl-6” data-streamdown=“unordered-list”>
- Bullets misaligned after applying
pl-6: check for margins on the ul or inherited padding on container elements. - Variant not applying: confirm Tailwind JIT mode or appropriate configuration to allow arbitrary variants.
This combination gives precise control over list marker placement, wrapping behavior, and item padding—useful for clean, readable lists in complex UI components._
Leave a Reply