list-inside list-disc whitespace-normal [li&]:pl-6
This article explains the CSS utility classes and selector shown in the title, how they interact, and practical examples for using them in Tailwind CSS projects.
What each part means
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside — Places list markers (bullets) inside the content box so markers are aligned with text, useful when you want bullets to indent with wrapped lines.
- list-disc — Uses disc (solid circle) as the list marker style.
- whitespace-normal — Collapses sequences of whitespace and wraps text normally.
- [li&]:pl-6 — A Tailwind arbitrary selector that targets a parent-anchored li element using the current selector (&). It applies padding-left: 1.5rem (pl-6) to each li when that selector matches; effectively this sets left padding on list items via an arbitrary variant.
How they work together
- &]:pl-6” data-streamdown=“unordered-list”>
- Combining list-inside with list-disc produces a bulleted list where the bullet sits inside the content flow; when an li wraps to multiple lines the wrapped lines align with the text rather than the bullet.
- whitespace-normal ensures long text wraps instead of preserving extra spaces or preventing wrapping.
- The arbitrary variant [li&]:pl-6 is useful when you need extra left padding on li elements in contexts where Tailwind’s default list spacing isn’t sufficient, or when you’re styling lists through a parent selector (e.g., applying styles from a component root).
Example usage in HTML (Tailwind)
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item.</li> <li>Long item that wraps onto multiple lines so you can see how list-inside aligns wrapped lines with the text instead of the bullet marker. This demonstrates line alignment and padding.</li> <li>Another item.</li></ul>When to use each
- Use list-inside when you want wrapped list items to align under the text rather than the bullet.
- Use list-disc to set a solid circular marker; replace with list-decimal or list-none as needed.
- Use whitespace-normal when you expect variable-length content and want normal wrapping behavior.
- Use [li&]:pl-6 when you need consistent left padding on li elements from a parent context or when composing reusable components that require additional indentation.
Notes and compatibility
- &]:pl-6” data-streamdown=“unordered-list”>
- The arbitrary selector syntax ([li&]:…) requires Tailwind v3+ and proper configuration to allow arbitrary variants.
- Browser behavior for list-inside vs list-outside can vary slightly; test across browsers if pixel-perfect alignment is critical.
- Adjust pl-6 to another spacing token if you need more or less indentation.
Quick checklist
- &]:pl-6” data-streamdown=“unordered-list”>
- Ensure Tailwind version supports arbitrary variants.
- Verify your project’s content scanning includes files with the arbitrary selector.
- Test wrapping and alignment in the target browsers.
This gives a compact explanation and practical example for using these Tailwind utilities together._
Leave a Reply