list-inside list-disc whitespace-normal [li&]:pl-6
This article explains a Tailwind CSS utility combination: what each class does, why and when you’d use them together, and a practical example showing the resulting HTML and behavior
What each class does
- list-inside — Positions list markers (bullets) inside the content box so they participate in the text flow (markers align with the first line of each list item).
- list-disc — Sets the list style to filled discs (solid bullets).
- whitespace-normal — Allows normal text wrapping and collapses sequences of whitespace into a single space; lines wrap at word breaks.
- [li&]:pl-6 — A variant using Tailwind’s arbitrary selector syntax that targets each li within the component and applies padding-left: 1.5rem (pl-6) to the li elements. The selector form
[li&]places the element selector before the parent selector; when used on a parent container this compiles to a selector that matches li elements inside the container and applies the rule.
Why combine them
- Putting markers inside (list-inside) and adding left padding on each li ensures bullets align visually with wrapped lines while keeping a consistent left gap for readable content.
- list-disc gives the familiar filled-bullet look.
- whitespace-normal prevents unexpected no-wrap behavior from utility stacks and ensures long content wraps naturally.
- The arbitrary selector [li&]:pl-6 gives precise control of li padding without adding extra classes to every li or changing document structure.
When to use
- &]:pl-6” data-streamdown=“unordered-list”>
- Multi-line list items where wrapped lines should align under the first line content (not under the bullet).
- Components where you prefer not to add classes to each li (e.g., MDX-generated lists or content from a CMS).
- Utility-first styling where keeping markup minimal is preferred.
Example HTML
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item that fits a single line.</li> <li>Long item that wraps onto multiple lines to demonstrate how the padding-left keeps wrapped lines aligned with the first line’s text rather than the bullet.</li> <li>Another item with <strong>inline formatting</strong> to show marker and padding interaction.</li></ul>Resulting behavior
- &]:pl-6” data-streamdown=“unordered-list”>
- Bullets render as filled discs inside the content box.
- Each li has 1.5rem left padding, so wrapped lines start aligned under the first line’s text, not the bullet.
- Text wraps normally; extra whitespace is collapsed.
Notes & caveats
- Browser defaults and UA styles can affect list marker alignment; list-inside is closest to consistent cross-browser behavior for inside markers, but test across target browsers.
- The arbitrary selector syntax requires a Tailwind version that supports it; ensure your build pipeline allows arbitrary selectors and that the generated selector specificity doesn’t conflict with other styles.
- If you need the marker visually outside the content box (marker left of padding), use list-outside and adjust margins instead.
Quick checklist
- Use this combo when you want inside bullets + consistent padding on li elements.
- Confirm Tailwind supports the arbitrary selector in your project.
Leave a Reply