list-inside list-disc whitespace-normal [li&]:pl-6
This article explains a Tailwind CSS utility class combination that targets list items and adjusts spacing for complex list structures. It’s concise, practical, and includes examples and usage notes.
What it does
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside: places list markers (bullets) inside the content box so bullets align with the first line of list item text.
- list-disc: uses disc-style bullets.
- whitespace-normal: allows text wrapping and collapses whitespace normally (prevents no-wrap or preserved whitespace).
- [li&]:pl-6: a Tailwind arbitrary selector that applies padding-left (pl-6) to list items when nested or matching the selector pattern—here it targets li elements and adjusts left padding to align multi-line list item content.
Why combine them
- &]:pl-6” data-streamdown=“unordered-list”>
- Keeps bullets visually attached to the first line while giving secondary lines consistent indentation.
- Ensures long list items wrap cleanly without breaking alignment.
- The arbitrary selector lets you fine-tune li padding without creating custom CSS.
Example HTML
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li> This is a short item. </li> <li> This is a longer list item that will wrap onto multiple lines. The combination ensures the wrapped lines are indented uniformly while the bullet remains inside the content box. </li></ul>When to use
- &]:pl-6” data-streamdown=“unordered-list”>
- Multi-line list items where you want bullets aligned with first line.
- Responsive layouts where list items may wrap on smaller screens.
- When you prefer Tailwind-only solutions and want to avoid custom CSS files.
Caveats
- Arbitrary selector syntax ([li&]:pl-6) requires Tailwind v3+ with JIT enabled.
- Browser rendering differences may affect exact alignment; test across major browsers.
- If you need different indentation at different breakpoints, use responsive prefixes (e.g., md:[li&]:pl-8).
Quick tips
- Combine with
space-y-2on the parentulto add vertical spacing between items. - Use
text-smortext-baseto control line length and wrapping. - li rules (e.g.,
[lili&]:pl-4)_
Leave a Reply