Article: list-inside list-disc whitespace-normal [li&]:pl-6
What this utility class combination does
This CSS/Tailwind-style utility sequence controls list appearance and spacing:
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside — places bullet markers inside the content flow so bullets are part of the text block.
- list-disc — uses solid round bullets for unordered lists.
- whitespace-normal — collapses sequences of whitespace and wraps text normally.
- [li&]:pl-6 — applies left padding (pl-6) to each list item via a selector targeting li elements (using arbitrary selector syntax).
When to use it
- &]:pl-6” data-streamdown=“unordered-list”>
- Use for multi-line list items where you want bullets aligned with the first line and wrapped lines indented naturally.
- Useful in content cards, documentation, or article bodies where readability and compact spacing matter.
- Use when you need extra left padding for list items without changing container padding.
Example usage (conceptual)
- Apply these classes to a ul element to get inside bullets, normal wrapping, and added left padding on each li.
- Works well with responsive layouts and when combining with text-sm or leading-relaxed for legibility.
Accessibility notes
- Ensure sufficient contrast between text and background.
- Maintain logical reading order; these utilities affect only presentation.
Quick tips
- Swap list-disc for list-decimal for numbered lists.
- Adjust pl-6 to pl-4 or pl-8 to fine-tune indentation.
Leave a Reply