list-inside list-decimal whitespace-normal [li&]:pl-6
What the class string means
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside: Place list markers (numbers) inside the content box so text wraps under the marker.
- list-decimal: Use decimal numbering (1., 2., 3.).
- whitespace-normal: Collapse and wrap whitespace normally; respects inline spacing rules.
- [li&]:pl-6: A Tailwind-style arbitrary selector targeting list item elements that match the selector
li&(often used in JIT/arbitrary variants) and appliespadding-left: 1.5rem(pl-6).
Why you might use this combination
- Ensures numbered lists keep markers aligned with content when wrapping.
- Controls spacing inside list items for readable indentation.
- Overrides default browser or framework list spacing in components where utility-first CSS (like Tailwind) is used.
Example HTML
html
<ol class=“list-inside list-decimal whitespace-normal [li&]:pl-6”><li>Short item that fits on one line.</li> <li>Long item that wraps to multiple lines to demonstrate how the number stays inside and the extra padding keeps the text aligned for readability across lines.</li> <li>Another item with inline <strong>elements</strong> and normal whitespace handling.</li></ol>Practical tips
- &]:pl-6” data-streamdown=“unordered-list”>
- Use when list items contain long text that should wrap under the number, not under a separate left gutter.
- Adjust pl-6 to another padding utility (pl-4, pl-8) as needed for visual balance.
- Test across browsers—some older browsers may render list markers inconsistently; additional CSS (e.g., setting list-style-position) can help.
CSS fallback (if not using Tailwind)
css
.custom-list { list-style-position: inside; list-style-type: decimal; white-space: normal;}.custom-list > li { padding-left: 1.5rem; }Quick checklist before deployment
- Confirm Tailwind JIT supports the arbitrary selector syntax used.
- Verify the selector matches your generated HTML (class vs. element structure).
Leave a Reply