list-inside list-decimal whitespace-normal [li&]:pl-6
This article explains the CSS utility classes shown in the title, what they do, why you might use them together, and how to apply them in real-world HTML to control list layout and spacing.
What each class does
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside — Positions the list marker (number or bullet) inside the content flow so the marker aligns with the first line of the list item rather than hanging outside. Useful when you want markers to follow the same left padding as item text.
- list-decimal — Uses decimal numbering (1., 2., 3., …) for ordered lists. Equivalent to setting list-style-type: decimal;.
- whitespace-normal — Sets whitespace handling to normal, allowing text wrapping and collapsing sequences of whitespace into a single space. Equivalent to white-space: normal;.
- [li&]:pl-6 — A bracketed, arbitrary variant selector (Tailwind-style) that targets list item elements with a specific attribute or custom selector pattern. In this form, it means “for li elements matching the li& selector, apply padding-left: 1.5rem (pl-6)”. Practically, this pattern is used to apply utilities scoped to nested selectors; exact behavior depends on the utility framework and configuration.
Why combine them
- Readability: list-inside + list-decimal keeps numbered markers inline with wrapped text, improving readability for multi-line list items.
- Wrapping control: whitespace-normal ensures long list items wrap naturally rather than preserving extra spaces or preventing wrapping.
- Precise indentation: a targeted padding utility like [li&]:pl-6 lets you adjust the indentation of list items without affecting other elements, useful for nested lists or when matching a design system.
Example usage (HTML + Tailwind-like utilities)
html
<ol class=“list-inside list-decimal whitespace-normal [li&]:pl-6”><li>Short item that stays on one line.</li> <li> A longer list item that will wrap naturally across multiple lines so you can see how the marker aligns with the first line of text and how padding is applied. </li> <li>Another item.</li></ol>Notes:
- If your utility framework doesn’t support arbitrary variant selectors, you can replicate the effect with a small custom CSS rule:
css
ol.custom-list > li { padding-left: 1.5rem; }- Test on multiple screen sizes to ensure the combination yields the intended alignment and spacing.
When to avoid
- If you need hanging indents (marker outside the text block), use list-outside instead of list-inside.
- If list items contain preformatted text or require preserving whitespace, don’t use whitespace-normal; consider whitespace-pre or pre-wrap.
Summary
Using list-inside, list-decimal, whitespace-normal, and a targeted padding rule gives you control over marker placement, numbering style, wrapping behavior, and precise indentation—helpful for creating readable, well-aligned ordered lists in modern utility-first CSS workflows._
Leave a Reply