CSS utility: list-inside list-decimal whitespace-normal [li&]:pl-6
This short guide explains what the combined utility class string does and how to use it in HTML with Tailwind-style utilities.
What each part does
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside — places list markers (numbers) inside the content box, so markers appear within the text block rather than hanging outside.
- list-decimal — uses decimal numbers (1., 2., 3.) for ordered lists.
- whitespace-normal — collapses whitespace and wraps text normally (default wrapping behavior).
- [li&]:pl-6 — a bracketed arbitrary selector applying padding-left (pl-6) to each li; the
li&pattern targets list-item elements when the utility is applied on the parent (it compiles to a selector like.parent-class li { padding-left: 1.5rem; }).
Example HTML
html
<ol class=“list-inside list-decimal whitespace-normal [li&]:pl-6”><li>First item — long text will wrap normally to the next line.</li> <li>Second item — aligned with left padding applied to each <code><li></code>.</li> <li>Third item — markers appear inside the content box.</li></ol>Visual effect summary
- &]:pl-6” data-streamdown=“unordered-list”>
- Numbers appear inside the list block, not hanging outside.
- Each list item receives left padding (pl-6), shifting content inward consistently.
- Text wraps normally without preserving extra whitespace.
Use cases
- Ordered lists where you want numbers inside the content flow and consistent left padding for better alignment.
- Compact lists in cards or sidebars where marker placement and padding improve readability.
Notes
- [li&]:pl-6 depends on your CSS framework’s arbitrary selector support and how it interprets
li&; confirm it compiles to the intendedliselector in your build._
Leave a Reply