Conversion
Tailored explanation: list-inside list-disc whitespace-normal [li&]:pl-6
&]:pl-6” data-streamdown=“unordered-list”>
- Context: This is a set of Tailwind CSS utility classes (and one arbitrary selector) applied to a list to control bullets, spacing, and padding for list items.
- Breakdown
- list-inside: places the list markers (bullets) inside the content box so bullets align with first line of text.
- list-disc: uses solid circle bullets.
- whitespace-normal: collapses and wraps whitespace normally (breaks long lines and collapses sequences of spaces).
- [li&]:pl-6: an arbitrary variant using the square-bracket selector syntax — it targets li elements when the current element is a descendant of that li? Actually Tailwind’s arbitrary variants use the form [selector]:utility where & is replaced by the generated selector for the element. So
[li&]:pl-6 compiles to a rule that applies padding-left:1.5rem (pl-6) to the element when it matches the selector li (i.e., when the element is a child of an li). In other words, it adds left padding to the element only when it’s inside an li.
- Common use case: apply to a nested list element (e.g., a ul inside an li) so the nested list receives extra left padding only when it’s inside an li, keeping spacing correct for nested bullets.
- Resulting behavior: outer list shows disc bullets inside the content box, wrapped text flows normally, and nested list elements gain 1.5rem left padding when placed inside an li, improving alignment of nested bullets and text.
- Notes
- Ensure your Tailwind config allows arbitrary variants (default enabled in modern Tailwind).
-
Leave a Reply