list-inside list-decimal whitespace-normal [li&]:pl-6
This article explains the CSS utility class pattern shown in the title — a compact, Tailwind-like shorthand that controls list numbering, marker placement, whitespace handling, and a targeted padding rule for list items. I’ll break down each part, show why you’d use it, and give practical examples and implementation tips.
What each part means
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside — Positions list markers (numbers or bullets) inside the content flow, so markers are placed within the list item’s content box rather than hanging outside.
- list-decimal — Uses decimal numbering for ordered lists (1, 2, 3, …).
- whitespace-normal — Ensures normal whitespace handling: sequences of whitespace collapse, and lines wrap at allowed break points.
- [li&]:pl-6 — A custom selector utility that applies left padding (pl-6) to list items. The bracketed form targets elements using a selector variant; here it means “apply pl-6 to li elements where the selector matches”. The exact syntax resembles Tailwind CSS JIT arbitrary variants: [li&]:pl-6 targets li when the parent selector pattern is matched (the underscore is a placeholder for combinator in some setups). Practically, this results in additional left padding on each list item to align content with list markers when using list-inside.
Why combine these utilities?
Combining these utilities creates a numbered list that:
- shows numbers inside the content box,
- uses standard decimal numbering,
- wraps long lines cleanly,
- aligns text and markers with consistent padding so wrapped lines remain visually aligned with the first line.
This is useful for UI components like step-by-step instructions, documentation, changelogs, or any place where clear, wrapped numbering is required.
When to choose list-inside vs list-outside
- Use list-inside when you want markers to participate in layout and wrap with content — good for compact designs and when markers should shift with text
- Use list-outside (default) when you prefer hanging markers and indented content — often better for long-form reading where markers should remain visually separate.
Example HTML & CSS (Tailwind-like)
Assuming a Tailwind setup that supports arbitrary variants:
<ol class=“list-inside list-decimal whitespace-normal [li&]:pl-6”><li>Install the package using your package manager.</li> <li>Import the main module and initialize with your options.</li> <li>Write a few example components and test responsiveness on mobile.</li> <li>Use semantic HTML and accessible labels for better UX.</li> <li>Build and ship — monitor for issues and iterate.</li></ol>Result behavior:
- Numbers appear inside each list item
- Long items wrap; wrapped lines align thanks to pl-6 on li elements.
- Whitespace collapses normally, avoiding unintended spacing.
Accessibility notes
- &]:pl-6” data-streamdown=“unordered-list”>
- Ensure ordered lists reflect logical order; use start attribute if numbering should begin at a specific value.
- Maintain sufficient contrast between text and background.
- Avoid using lists purely for visual layout; screen readers rely on semantic list markup.
Troubleshooting
- If markers overlap content, increase the padding value (e.g., pl-8).
- If arbitrary variant syntax ([li&]:pl-6) isn’t recognized, confirm JIT/arbitrary variant support or apply a manual CSS rule:
ol.custom-list li { padding-left: 1.5rem; }- &]:pl-6” data-streamdown=“unordered-list”>
- For consistent cross-browser rendering, test in major browsers, as marker positioning can differ.
Summary
The combined class string “list-inside list-decimal whitespace-normal [li_&]:pl-6” creates compact, wrapped, well-aligned numbered lists ideal for step-by-step content. Use it when you need numbers to sit inside content and wrapped lines to remain aligned with clear padding on list items.
Leave a Reply