You’re referencing Tailwind CSS utility classes and a variant-like selector for styling list items. Here’s what each part does and how to use them together.
- list-inside — sets list-style-position: inside; so bullets/markers are placed inside the content box, causing them to wrap with the text.
- list-disc — sets list-style-type: disc; (solid circle bullets).
- whitespace-normal — sets white-space: normal; allowing text to wrap normally.
- [li&]:pl-6 — this is a bracketed arbitrary variant using Tailwind’s JIT arbitrary variants syntax. It targets a parent selector where the parent is an li that contains the element (the ampersand & is replaced with the generated selector). Specifically, [li&]:pl-6 produces a rule that applies padding-left: 1.5rem (pl-6) when the element is a descendant of an li — equivalent to li .your-class { padding-left: 1.5rem; }.
Usage example (Tailwind classes on a child element inside li):
- On the child element: class=“list-inside list-disc whitespace-normal [li_&]:pl-6”
- Result: the list uses inside-positioned disc bullets, text wraps normally, and the child receives left padding when it’s inside an li.
Note: Browser native bullets can interact with padding and list position—test in context. If you intended a different selector direction (e.g., apply styles to li when it contains the element), the selector order would change (e.g., [li:has(&)]:pl-6 requires :has support).
Leave a Reply