list-inside list-disc whitespace-normal [li&]:pl-
This article explains the CSS/Tailwind-style utility class string “list-inside list-disc whitespace-normal [li&]:pl-6”, what each part does, and how to use it together to control list appearance in modern web design.
What the class string means
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside — Places bullets/markers inside the list item’s content box so they flow with the text rather than sitting outside the content area. This affects marker placement and wrapping behavior.
- list-disc — Uses solid disc markers for list items (the default unordered list bullet style).
- whitespace-normal — Allows normal white-space handling: collapses consecutive spaces, wraps text where needed, and respects line breaks only where explicitly placed.
- [li&]:pl-6 — A Tailwind arbitrary selector that targets each li element and applies left padding (
pl-6= 1.5rem by default). The selector syntax[li&]places thelibefore the current selector (the ampersand&stands for the component selector), producing a rule likeli .your-selectorwhen compiled by a processor that supports this pattern. In practice this is used to add left padding specifically to list items while keeping other list styling intact.
Why combine these utilities
- Ensures bullets are visually inside the text block while giving list items extra left padding for alignment and readability.
- Keeps long list items wrapping naturally (whitespace-normal) so lines break sensibly.
- Provides consistent marker style (list-disc) across browsers.
Example usage (HTML + Tailwind
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item.</li> <li>Long item that wraps onto multiple lines to show how wrapping behaves when using whitespace-normal combined with list-inside and additional padding on the li.</li> <li>Another item.</li></ul>
Visual result and notes
- Markers appear at the start of the first line inside each li.
- When an li wraps, the continuation lines align after the bullet due to the left padding from
pl-6. - If you prefer the marker outside the content box, use
list-outsideinstead oflist-inside. - Ensure your Tailwind build supports arbitrary selector variants; the exact
[li&]:pl-6syntax may vary with your toolchain (some setups require plugin support or different escaping).
Troubleshooting
- &]:pl-6” data-streamdown=“unordered-list”>
- If
[li&]:pl-6has no effect, confirm Tailwind’s JIT/variant support is enabled and that your Tailwind version recognizes arbitrary variants. - For better cross-browser consistency, test with different font sizes and line-heights; adjust
pl-6as needed. - Alternative approach: wrap content in a span and apply padding to that span if arbitrary selectors aren’t available.
Conclusion
Using “list-inside list-disc whitespace-normal [li&]:pl-6” gives you a compact, readable list style with internal bullets and controlled wrapping/alignment—useful for UI components, documentation, and content-heavy layouts._
Leave a Reply