list-inside list-disc whitespace-normal [li&]:pl-6
What this utility class combination does
This Tailwind CSS class string combines several utilities to control list appearance and spacing:
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside — places the list marker (bullet) inside the content box so the marker aligns with the first line of the list item rather than hanging in the left gutter.
- list-disc — uses a filled circle (disc) as the list marker.
- whitespace-normal — allows text to wrap normally within list items (collapsing sequences of whitespace and wrapping at normal break points).
- [li&]:pl-6 — a JIT arbitrary variant that applies padding-left: 1.5rem (pl-6) to each li selector inside the element; the special syntax targets list item elements by generating a rule like
.your-class li { padding-left: 1.5rem; }.
Why you might use it
- &]:pl-6” data-streamdown=“unordered-list”>
- Keeps bullets aligned with the first line while providing extra left padding on each list item for improved readability.
- Ensures long lines wrap naturally without preserving extra whitespace.
- Useful when you want consistent indentation for wrapped lines and a compact marker placement.
Example usage
Place the classes on a parent ul element to affect its list items:
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item.</li> <li>A longer list item that will wrap onto multiple lines to demonstrate how the marker and padding behave together in typical responsive layouts.</li></ul>Notes and compatibility
- &]:pl-6” data-streamdown=“unordered-list”>
- The arbitrary variant syntax ([li&]:pl-6) requires Tailwind JIT (v3+) and may need your project’s safelist or allowed list configuration if generated dynamically.
- list-outside instead of list-inside.
Leave a Reply