list-inside list-disc whitespace-normal [li&]:pl-6
What this utility class combination does
This set of Tailwind-like utility classes controls list appearance and spacing:
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside: Places bullets/markers inside the list item box so the marker participates in line wrapping.
- list-disc: Uses a solid disc as the list marker.
- whitespace-normal: Allows text to wrap normally (collapses whitespace and permits wrapping).
- [li&]:pl-6: Applies padding-left: 1.5rem (pl-6) to each list item — using a variant that targets the li element itself so the padding affects the list item content rather than the list container.
When to use this combination
- &]:pl-6” data-streamdown=“unordered-list”>
- Text-heavy list items where markers should wrap with text rather than staying outside.
- When list item content needs consistent left padding to align content across wrapped lines.
- In responsive layouts where you want normal wrapping and readable list markers.
Example HTML
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item that fits on one line.</li> <li>Long item that wraps across multiple lines to show how the marker stays inside and the content aligns with consistent left padding.</li> <li>Another item with explanatory text demonstrating spacing and wrapping.</li></ul>Accessibility & visual notes
- &]:pl-6” data-streamdown=“unordered-list”>
- Keeping the marker inside can help screen readers by preserving visual association, but verify semantics remain an unordered list element.
- Ensure sufficient contrast between marker color and background.
- Test at various breakpoints to confirm wrapping and padding behave as intended.
Alternatives & tweaks
- Use list-outside if you prefer markers outside the content flow.
- Adjust padding ([li&]:pl-4 or pl-8) to change indentation.
- Combine with marker:text- utilities to change marker color or size.
Conclusion
This class combination provides readable, well-aligned list items by placing markers inside, enabling normal wrapping, and adding per-item padding — a good default for multi-line list content in componentized layouts.
Leave a Reply