list-inside list-decimal whitespace-normal [li&]:pl-6
What this utility-class combination does
This string of Tailwind-like utility classes configures list styling and spacing for an HTML list:
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside — positions list markers (numbers) inside the content box so markers sit within the text flow rather than in the margin.
- list-decimal — uses decimal (1., 2., 3.) numbering for list items.
- whitespace-normal — collapses sequences of whitespace and wraps text normally, preventing preservation of line breaks or extra spaces.
- [li&]:pl-6 — uses an arbitrary variant to apply left padding of 1.5rem (pl-6) specifically to list item (li) elements; the selector form
li&targets the li in relation to the current element so each - gets the padding.
Typical HTML structure
Use these classes on a
- &]:pl-6” data-streamdown=“unordered-list”> or
- wrapping list items:
html
<ol class=“list-inside list-decimal whitespace-normal [li&]:pl-6”><li>First item with normal wrapping and extra left padding so content aligns after the marker.</li> <li>Second item that will wrap onto multiple lines and keep consistent indentation.</li> <li>Third item with standard decimal markers placed inside the content box.</li></ol>Why use this combination
- &]:pl-6” data-streamdown=“unordered-list”>
- Improves readability when list items wrap to multiple lines by aligning wrapped lines with the start of the text, not the marker.
- Ensures consistent spacing across list items via pl-6 on each li.
- Keeps inline whitespace normalized so text flows predictably across devices and browsers.
Accessibility and rendering notes
- Placing markers inside can affect screen reader verbosity depending on UA; test with assistive tech.
- The arbitrary selector
[li&]:pl-6requires a Tailwind setup that supports arbitrary variants (Tailwind v3+). Confirm your build configuration allows this syntax. - If markers overlap content on small screens, reduce pl-6 to pl-4 or use list-outside with margin adjustments.
Variations and tips
- &]:pl-6” data-streamdown=“unordered-list”>
- Use
list-outsideif you prefer markers in the margin. - Replace
pl-6withpl-4orpr-utilities for tighter spacing. - Combine with
marker:text-gray-500(Tailwind marker utilities) to style the numbers. - For nested lists, set
pl-on the container instead of on li to preserve hierarchy.
Example with styling tweaks
html
<ol class=“list-inside list-decimal whitespace-normal marker:text-gray-500 [li_&]:pl-6”> <li>Item one with styled marker.</li> <li>Item two that wraps to a second line but keeps aligned indentation.</li></ol>This setup gives numbered lists clear, consistent indentation and predictable wrapping behavior across screen sizes.
Leave a Reply