You’re referencing Tailwind CSS utility classes and a custom selector:
- list-inside: Places list marker (bullet/number) inside the content box so it aligns with the first line of the list item instead of hanging outside.
- list-disc: Sets list-style-type: disc; (solid round bullets).
- whitespace-normal: Sets white-space: normal; allowing text to wrap and collapse whitespace per normal HTML behavior.
- [li&]:pl-6 — a variant using Tailwind’s arbitrary selector feature. It targets an element where a child li matches a specific selector pattern. Concretely, [li&]:pl-6 produces a rule that applies padding-left: 1.5rem (pl-6) to the matched element when the selector condition is met. The selector [li&] means “an element that is the parent of an li” with the parent selector (&) used inside the attribute selector. In practice this variant is commonly used to add left padding to a container when it contains li children so bullets and text align as desired.
Combined effect example:
- &]:pl-6” data-streamdown=“unordered-list”>
- On a ul element: class=“list-inside list-disc whitespace-normal [li&]:pl-6”
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside + list-disc produce normal bullets inside the content flow
- whitespace-normal lets long lines wrap.
- [li&]:pl-6 adds 1.5rem left padding to the ul when it contains li children, shifting bullets/text inward for alignment.
Note: Browser support and exact selector output depend on your Tailwind version and configuration; verify the generated CSS in your build if it doesn’t behave as expected.
Leave a Reply