You’re referencing Tailwind-style utility syntax for styling nested lists. Here’s what each part means and how to achieve it with regular CSS and Tailwind.
What it does
- list-inside: places list marker (bullet/number) inside the content box so it aligns with text wrap.
- list-disc: uses a filled circle bullet for unordered lists.
- whitespace-normal: collapses whitespace and allows wrapping (default behavior).
- [li&]:pl-6 — a selector targeting li elements where the left padding (pl-6 = 1.5rem) is applied to each li using a variant with selector replacement; li& means “select li that is the current element” (used to scope the utility to li).
Tailwind equivalent usage
- Apply classes directly on the ul and li:
- ul class=“list-inside list-disc whitespace-normal”
- li class=“pl-6” (or use space-y / gap utilities as needed)
If you want to scope the padding via a variant (selector replacement) in Tailwind config or JIT arbitrary variants:
- Using arbitrary variant syntax on a parent element:
- …
- This uses Tailwind’s arbitrary variant feature where [li&] expands to the selector li& or li that matches the element — resulting in li elements inside the ul getting pl-6.
Plain CSS equivalent
- &]:pl-6” data-streamdown=“unordered-list”>
- ul { list-style-position: inside; list-style-type: disc; white-space: normal; }
- ul li { padding-left: 1.5rem; }
Notes
- list-inside can make long wrapped lines align under the marker; if you prefer alignment with the text, use list-outside and adjust padding on li.
Leave a Reply