list-inside list-disc whitespace-normal [li&]:pl-6
What this utility-class combo does
This string looks like a set of Tailwind CSS utility classes combined with a custom variant targeting list items. Together they control how lists render:
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside: places the bullet inside the content box so text wraps under the bullet.
- list-disc: uses filled-circle bullets.
- whitespace-normal: allows normal wrapping and collapsing of whitespace.
- [li&]:pl-6: a bracketed arbitrary selector that applies padding-left (pl-6) when the parent selector matches a list item pattern — specifically it targets list-item elements so each li gets left padding.
When to use this pattern
Use this combination when you want:
- &]:pl-6” data-streamdown=“unordered-list”>
- Bulleted lists with standard discs.
- Text that wraps beneath bullets (not hanging outside).
- Normal word wrapping behavior.
- Extra left padding on each li (pl-6) to visually separate bullets from text or to align with other content.
Example HTML
Use these classes on a ul to apply the styles to all child list items:
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>First item with wrapped text that will flow beneath the bullet.</li> <li>Second item — notice the added left padding on the list item itself.</li> <li>Third item with longer content to demonstrate whitespace-normal wrapping behavior.</li></ul>Notes and browser support
- &]:pl-6” data-streamdown=“unordered-list”>
- Tailwind’s arbitrary selector feature ([…]:…) requires a version that supports arbitrary variants; ensure your Tailwind config allows it.
- If the arbitrary variant syntax is unfamiliar, the selector [li&] pads each li; alternative approaches include applying pl-6 directly to li via a child selector in your CSS or using a component class.
- Test in your target browsers; list-inside vs list-outside can affect alignment, especially with nested lists.
Alternatives
- &]:pl-6” data-streamdown=“unordered-list”>
- For hanging bullets: use list-outside instead of list-inside.
- To control only nested lis, use a nested selector like ul > li: apply pl-6 to li directly.
- If arbitrary variants are restricted, create a utility class in your CSS:
css
.my-list li { padding-left: 1.5rem; }Quick summary
This class group yields disc-style bullets placed inside the content flow, normal text wrapping, and extra left padding on each li via an arbitrary variant — useful for readable, padded bulleted lists in Tailwind projects._
Leave a Reply