You’re referencing a Tailwind CSS utility pattern that targets list items inside nested lists and adjusts padding and whitespace. Here’s what each part means and how to use it:
- list-inside list-disc
- list-inside: positions list markers (bullets) inside the content flow instead of hanging outside.
- list-disc: uses a solid disc as the list marker.
- whitespace-normal
- Restores normal whitespace handling so lines wrap normally (collapses sequences of whitespace and breaks lines).
- This is Tailwind’s arbitrary selector syntax. It generates a selector that targets the parent element when a nested
- matches the selector pattern. Specifically, li& [blocked]:pl-6 applies padding-left: 1.5rem (pl-6) to the element when it contains an li matching the selector.
- The selector li& [blocked] compiles to “li ” (i.e., any parent that is immediately after an li in the selector pattern), so it’s commonly used to add left padding to lists that contain list items, useful for nested list styling.
Example usage (HTML with Tailwind):
&]:pl-6”>
First item Second item
Nested item Effect: bullets are inside, text wraps normally, and the parent UL gains left padding when it contains LI children—helpful for aligning nested lists._
Leave a Reply