list-item

list-inside list-decimal whitespace-normal [li&]:pl-

This article explains a utility-first CSS class string—likely from Tailwind CSS or a similar framework—and what each part does, when to use it, and how to apply it in practical HTML markup.

What the classes mean

• list-inside — Places list markers (bullets or numbers) inside the content box of each list item instead of in the margin. This aligns markers with item text flow and prevents marker overlap with long content or custom padding.
• list-decimal — Uses decimal (1., 2., 3., …) numbering for ordered lists. Equivalent to CSS list-style-type: decimal;.
• whitespace-normal — Restores normal whitespace processing inside elements: sequences of whitespace collapse, and lines wrap as needed. Equivalent to white-space: normal;.
• [li&]:pl-6 — A bracketed arbitrary variant targeting the list item selector (li& stands for li when applying the variant) to add left padding of 1.5rem (pl-6 in Tailwind). It compiles to applying padding-left: 1.5rem on the li elements (using the variant) so the marker stays visible and the text is indented.

Note: The exact syntax of the arbitrary variant may vary by framework version; the intent is to apply pl-6 specifically to each li (not the whole ol).

Why combine these classes

• Using list-decimal + list-inside makes numbered lists render with numbers inside the content flow so they remain aligned with wrapped lines.
• Adding pl-6 on li ensures consistent spacing between number and list text even when markers are inside.
• whitespace-normal prevents unexpected nowrap behavior from parent styles (useful inside components that globally set whitespace utilities).

Example HTML

<ol class=“list-inside list-decimal whitespace-normal [li&]:pl-6”><li>Short item that fits on one line.</li>  <li>Long item that wraps onto multiple lines to demonstrate how the numeric marker and padding interact with wrapped content in an ordered list.</li>  <li>Another item.</li></ol>

ol.custom-list li { padding-left: 1.5rem; }