You’re referencing Tailwind-style utility syntax for styling nested ordered lists. Breaking it down:
- list-inside — places list markers (numbers) inside the content box instead of outside.
- list-decimal — sets the list style to decimal numbering (1., 2., 3.).
- whitespace-normal — collapses whitespace and allows wrapping (default text wrapping behavior).
- [li&]:pl-6 — a JIT/Arbitrary selector variant that targets li elements when they are the subject of the utility. Specifically:
- &]:pl-6” data-streamdown=“unordered-list”>
- The bracketed form [selector]:utility lets you write an arbitrary variant that matches a selector relative to the element the utility is applied to.
- li& expands to select li elements that contain the current element (it’s the inverse/parent selector pattern used in some Tailwind setups). Combined with :pl-6 it applies padding-left: 1.5rem (24px) to those li elements.
Practical effect: applied to a container (e.g., ol or ul) this set results in a decimal, inside-numbered list whose items wrap normally, and the list item elements receive left padding of 1.5rem via the arbitrary variant so content aligns with the marker when nested or when custom alignment is desired.
Example usage (Tailwind JIT / arbitrary variants supported):
- &]:pl-6” data-streamdown=“unordered-list”>
- On an ol: class=“list-inside list-decimal whitespace-normal [li&]:pl-6”
Notes:
- &]:pl-6” data-streamdown=“unordered-list”>
- The exact behavior of li& depends on your Tailwind config and version; arbitrary selector variants require
Leave a Reply