Explanation of the utility class combination
- Context: This is about Tailwind CSS utility classes and a variant selector targeting list items.
- Breakdown:
- list-inside: Places list markers (bullets/numbers) inside the content box so they participate in text flow.
- list-disc: Uses filled-circle bullets for unordered lists.
- whitespace-normal: Restores normal whitespace handling (collapses consecutive whitespace, wraps lines).
- [li&]:pl-6: A variant using Tailwind’s arbitrary selector feature that targets an element when it is a direct child li of the current element. Specifically:
- &]:pl-6” data-streamdown=“unordered-list”>
- The selector produced is li:current-element (the li is placed before the element selector). In Tailwind arbitrary selector syntax,
[li&]means “apply styles when the element is matched by li > &” — effectively select elements that are children of an li. - pl-6 then applies left padding of 1.5rem (24px) to that element when the variant matches.
- The selector produced is li:current-element (the li is placed before the element selector). In Tailwind arbitrary selector syntax,
Typical use-case
- &]:pl-6” data-streamdown=“unordered-list”>
- You have a structure where an element inside an li (for example a div or paragraph) needs extra left padding to align with the bullet when using list-inside. Applying:
- list-inside list-disc whitespace-normal [li&]:pl-6
on the container makes bullets inside, uses disc markers, normal whitespace, and ensures child elements inside li get 1.5rem left padding so text lines up nicely with the bullet
- list-inside list-disc whitespace-normal [li&]:pl-6
Resulting CSS (approximate
css
.list-inside { list-style-position: inside; }.list-disc { list-style-type: disc; }.whitespace-normal { white-space: normal; }li > .(your-element) { padding-left: 1.5rem; } /from [li&]:pl-6 */Notes
- Ensure your Tailwind config allows arbitrary variants (Tailwind v3+ supports this).
- If alignment still feels off, consider using
marker:ml-?utilities or adjust padding value._
Leave a Reply