list-inside list-decimal whitespace-normal [li&]:pl-6
What this class combination does
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside: Places list markers (numbers) inside the content flow so they align with the first line of each list item.
- list-decimal: Uses decimal numbering (1., 2., 3., …).
- whitespace-normal: Collapses whitespace and allows text to wrap normally.
- [li&]:pl-6: Applies left padding (1.5rem) to each list item via a Tailwind arbitrary variant that targets the li elements’ direct children (the selector matches li& where & is the list item).
When to use it
- Ordered lists where you want numbers to sit inside the content block rather than hanging outside.
- Long list items that wrap to multiple lines and should maintain normal text wrapping.
- When you need consistent left padding on each li for improved readability or to align with other padded content areas.
Example HTML
html
<ol class=“list-inside list-decimal whitespace-normal [li&]:pl-6”><li>Short item.</li> <li>Long item that wraps to a second line so you can see how the number stays inside and the wrapped lines align with the text, not the marker.</li> <li>Another item.</li></ol>Visual behavior notes
- &]:pl-6” data-streamdown=“unordered-list”>
- Because markers are inside, the number consumes horizontal space within the line box; for long numbers (e.g., 100.) they will shift text more noticeably.
- The pl-6 on li provides consistent indentation for wrapped lines; adjust the value (pl-4, pl-8) to fit your layout.
- whitespace-normal ensures sequences of spaces collapse and lines wrap at normal break points—helpful when list content includes inline code or long words might otherwise overflow.
Accessibility tips
- Keep list items concise when possible; screen readers announce numbers correctly with list-inside.
- Ensure sufficient contrast for the text and consider increased spacing if items are dense to aid readability.
Quick variants
- Use list-outside if you prefer hanging numbers.
- Replace list-decimal with list-disc for bulleted lists.
- Combine with marker:text-gray-500 to style the numbers separately._
Leave a Reply