You’re referencing a Tailwind-style utility combo for list styling. Here’s what each part does and how they work together:
- list-inside: Places list markers (bullets/numbers) inside the content flow so the marker is part of the line box and will wrap with the text.
- list-disc: Uses a solid disc as the list marker (bulleted list).
- whitespace-normal: Restores normal whitespace handling — collapses sequences of whitespace and allows wrapping.
- [li&]:pl-6: This is an arbitrary variant targeting the li elements’ immediate child selector pattern using the current-parent (&). It applies padding-left: 1.5rem (pl-6) to the li matched by the variant. Concretely, it generates a selector roughly like:
[li&]:pl-6 => li .your-element { padding-left: 1.5rem }
(Used when you need to apply padding to an li via a parent-aware arbitrary variant.)
Notes and tips:
- Common combination: use list-inside + list-disc + whitespace-normal on ul to get bullets that wrap naturally with normal wrapping behavior.
- If you want indentation of the list content itself, prefer applying padding on the ul (e.g., pl-6 on ul) rather than using an arbitrary li variant, unless you specifically need to target li from a different scope.
- Browser default: list-style-position: inside (list-inside) makes wrapped lines align under the text, not under the bullet; list-outside (default) aligns wrapped lines under the bullet.
- If bullets appear misaligned when you add padding, try list-outside with padding on ul or use ::marker styling (supported in modern browsers) to control marker spacing.
If you want exact Tailwind-generated selector for [li&]:pl-6 in your project, tell me the class name you’ll attach it to and I’ll produce the CSS selector.
Leave a Reply