You’re asking about a utility-class combination that looks like Tailwind CSS. Here’s what each part does and how they interact:
- list-inside — places list markers (bullets/numbers) inside the content box so they appear within the text block instead of hanging in the margin.
- list-disc — sets the list-style-type to discs (solid round bullets).
- whitespace-normal — restores normal white-space handling: sequences of whitespace collapse, and lines wrap normally.
- [li&]:pl-6 — a Tailwind arbitrary selector variant that targets direct li elements (the ampersand (&) is the placeholder for the parent selector). In this form it applies padding-left: 1.5rem (pl-6) to each li matched by the selector. Concretely, if applied on a parent element, it compiles to a rule like .parent [li&]:pl-6 => li.parent { padding-left: 1.5rem } — but the standard intent is to target li children; correct usage is usually [li&]:pl-6 or more commonly [&>li]:pl-6 depending on desired specificity and Tailwind version.
Usage notes and correct example:
- Typical Tailwind usage to get inside bullets with left padding on each li:
- Parent element classes: “list-inside list-disc whitespace-normal [&>li]:pl-6”
- This will: show disc bullets inside the text box, allow normal wrapping, and add 1.5rem left padding to each direct li child.
Potential pitfall:
- Arbitrary variants require Tailwind JIT and correct syntax — small differences ([li&] vs [&>li]) change what selector is generated. Test the compiled CSS if bullets or padding don’t appear.
Leave a Reply