list-inside list-disc whitespace-normal [li&]:pl-6
What the class string means
This string is a group of Tailwind CSS utility classes and a bracketed arbitrary variant that together control list style and spacing:
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside — places list markers (bullets) inside the content box so the marker sits within the text block.
- list-disc — uses a filled disc as the list marker.
- whitespace-normal — collapses and wraps whitespace normally so text wraps across lines.
- [li&]:pl-6 — an arbitrary selector variant that targets list item elements (li) and applies left padding of 1.5rem (pl-6) to the element that matches the selector when the list item contains the element. In plain CSS this targets the parent when its child is an li (equivalent to li > &), useful for styling nested structures or components from inside list items.
When to use these together
Use this combination when you want bullets rendered inside the content area, predictable wrapping of long lines, and consistent left padding applied to elements inside list items — for example in card components, documentation lists, or nested menus where content inside li needs spacing to align with the bullet.
Practical example (concept)
Imagine a component that shows feature items where each feature is a small card inside an li. Applying these utilities ensures:
- &]:pl-6” data-streamdown=“unordered-list”>
- Bullets remain visible and aligned with text.
- Long feature descriptions wrap naturally.
- Inner cards or elements receive consistent left padding so their content lines up with the bullet.
Notes and caveats
- The exact behavior of the arbitrary variant ([li&]:pl-6) depends on your Tailwind configuration and version; arbitrary variants require JIT mode or Tailwind v2.2+ features.
- Browser default styles and reset CSS can affect list marker placement; test across viewports.
- For nested lists, adjust padding or use responsive utility classes to avoid excessive indentation.
Quick code sketch
Use this approach when composing utility classes for list-rich UIs; tailor the padding value and marker style as needed to match design.
Leave a Reply