list-inside list-disc whitespace-normal [li&]:pl-6
What it is
This is a set of Tailwind CSS utility classes combined with a custom attribute-style selector ([li&]:pl-6) that together control list rendering and spacing:
- list-inside — places list markers (bullets) inside the content box so markers flow with text wrap.
- list-disc — uses solid disc bullets.
- whitespace-normal — allows normal wrapping and collapsing of whitespace.
- [li&]:pl-6 — a custom arbitrary variant that targets list item children and applies left padding (pl-6) to each
- . The selector means “when the parent matches, apply padding-left to the li,” using the variant syntax where the raw selector is provided inside square brackets.
When to use it
Use this combination when you want bullets inside the content box, normal text wrapping, and extra left padding on each list item without changing the parent’s padding. It’s useful for lists where wrapped lines should align under the bullet and each item needs consistent indentation.
Example HTML
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item</li> <li>Long item that wraps to multiple lines to show how the bullet stays inside and wrapped lines align properly under the text.</li> <li>Another item</li></ul>Notes and caveats
- The arbitrary variant syntax ([li_&]:pl-6) requires a build setup that supports Tailwind’s arbitrary variants and the specific selector you provide. Ensure your Tailwind version supports this.
- Browser default list styling and user-agent styles may affect exact alignment; use reset or normalize styles if precise control is needed.
- If you need the bullet outside the text box, use list-outside instead of list-inside.
Leave a Reply