p]:inline” data-streamdown=”list-item”>Free Remodel Cost Spreadsheet: Detailed Line-Item Budgeting

What this utility-class combination does

This CSS utility-class string targets list styling and spacing for HTML lists (ul/ol) and their list items using a utility-first CSS framework (like Tailwind). Broken down:

&]:pl-6” data-streamdown=“unordered-list”>
• list-inside — places list markers (bullets/numbers) inside the content flow so they align with the first line of each list item.
• list-decimal — sets ordered lists to use decimal numbering (1., 2., 3., …).
• whitespace-normal — allows normal whitespace handling: collapsing sequences of whitespace and wrapping text at soft wrap points.
• [li&]:pl-6 — a bracketed arbitrary selector that applies a left padding of 1.5rem (Tailwind’s pl-6) to list item elements matching the selector li&. In many utility frameworks the & stands for the current selector; here the pattern implies selecting li elements when nested under the current element and adding padding-left.

When to use this combination

Use these classes when you want an ordered list that:

• Uses decimal numbering,
• Keeps the numbers inside the text block (aligned with the first line),
• Allows natural line wrapping,
• Adds consistent left padding on list items for clear indentation.

This is useful for documentation, step-by-step instructions, or any content where readable, neatly indented ordered lists improve clarity.

Example HTML

<ol class=“list-inside list-decimal whitespace-normal [li&]:pl-6”><li>Prepare materials and tools required for the task.</li>  <li>Follow each step carefully, wrapping lines naturally when necessary.</li>  <li>Review and adjust spacing so numbers and text align clearly.</li></ol>

.my-list {  list-style-position: inside;  list-style-type: decimal;  white-space: normal;}.my-list > li {  padding-left: 1.5rem;}