list-inside list-disc whitespace-normal [li&]:pl-6
This article explains the utility, behavior, and use-cases of the Tailwind CSS utility classes shown in the title: list-inside, list-disc, whitespace-normal, and the arbitrary selector [li&]:pl-6. It covers what each does, how they interact when applied to nested lists, browser considerations, and practical examples with HTML and Tailwind markup.
What each utility does
- list-inside: Positions list markers (bullets) inside the content box of the list item instead of outside. This makes bullets align with the content’s left padding.
- list-disc: Sets the list-style-type to disc (solid circle) for unordered lists.
- whitespace-normal: Allows text to wrap normally; collapses sequences of whitespace and wraps text as needed.
- [li&]:pl-6: An arbitrary selector using Tailwind’s JIT bracket syntax that targets an element when it appears as a child of an li element (the specific selector means “li > &” with a custom escape). It applies padding-left: 1.5rem (pl-6) to the matched element.
How they interact for nested lists
- &]:pl-6” data-streamdown=“unordered-list”>
- Applying
list-inside list-discto a ul makes bullets appear inside, which affects alignment especially when items have left padding. - whitespace-normal ensures list item text wraps cleanly across lines instead of preserving extra spaces or preventing wrapping
- [li&]:pl-6 is useful for adding consistent indentation to elements that appear directly inside li elements (e.g., nested uls or custom components), ensuring nested content aligns visually with parent list items.
Practical examples
HTML with Tailwind classes:
html
<ul class=“list-disc list-inside whitespace-normal”><li> First item with long text that will wrap normally across multiple lines to demonstrate whitespace-normal behavior. <ul class=”[li&]:pl-6 list-disc list-inside whitespace-normal”> <li>Nested item one with wrapping text.</li> <li>Nested item two.</li> </ul> </li> <li>Second item.</li></ul>Notes:
- &]:pl-6” data-streamdown=“unordered-list”>
- The inner ul uses the arbitrary selector so that when the inner ul is directly inside an li, it receives pl-6, creating extra indentation.
- If you need the selector to target all descendant positions, adjust to
[li&]:pl-6semantics or use more specific CSS if Tailwind’s escaping differs in your setup.
Browser considerations
- &]:pl-6” data-streamdown=“unordered-list”>
- Tailwind utilities compile to standard CSS; behavior is consistent across modern browsers.
- Ensure your build uses the JIT engine that supports arbitrary selectors and that your Tailwind version allows the chosen selector form.
When to use this pattern
- Creating readable nested lists where bullets and wrapped text align neatly.
- Applying consistent indentation to nested components inside list items without writing custom CSS.
- Maintaining responsive, wrap-friendly content in lists.
Quick checklist for implementation
- Confirm Tailwind JIT and version support for arbitrary selectors.
- Apply
list-disc list-inside whitespace-normalto list containers. - Use
[li_&]:pl-6on nested list containers or components to add indentation when they are direct children of li elements. - Test wrapping and alignment at different viewport widths.
This combination keeps list markers aligned with content, ensures proper text wrapping, and provides a simple rule to indent nested elements only when they appear inside list items.
Leave a Reply