fluxstoragehub4.cfd

Written by

pw

in

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

This article explains the utility and behavior of the Tailwind CSS utility combination list-inside list-decimal whitespace-normal [li&]:pl-6, shows when to use it, and gives practical examples and accessibility tips.

What each utility does

  • list-inside — Positions list markers (numbers) inside the content flow so they align with the first line of list items rather than hanging outside the block.
  • list-decimal — Uses decimal numbers for ordered lists (1., 2., 3., …).
  • whitespace-normal — Ensures normal white-space handling: collapses consecutive spaces and wraps text at allowed break points.
  • [li&]:pl-6 — A Tailwind arbitrary selector that targets descendant li elements and applies padding-left: 1.5rem (pl-6) to them; useful for adding consistent left padding to list items while preserving the marker placement.

When to use this combination

Use this set when you want a numbered list whose markers sit inside the content flow, where list items can wrap across multiple lines normally, and each li has consistent left padding so wrapped lines align visually with the text (not the marker). This is helpful for documentation, long-form content, or UI components where numbered steps need readable wrapping and tidy alignment.

Visual and behavioral notes

    &]:pl-6” data-streamdown=“unordered-list”>

  • With list-inside, the list marker occupies space inside the content box. If you also add padding to li, the marker shifts because it’s part of the content. The [li&]:pl-6 rule adds extra left padding to list items so their text lines keep a clear offset from the marker.
  • whitespace-normal ensures long text wraps naturally; without it, lines may not break as expected if other whitespace utilities are present.
  • If you prefer markers hanging in the margin (so text aligns flush and wraps beneath the first line), use list-outside instead and adjust padding/margin on the list container.

Example HTML

html
<ol class=“list-inside list-decimal whitespace-normal [li&]:pl-6”><li>Short item that stays on one line.</li>  <li>This is a longer list item that wraps across multiple lines to demonstrate how wrapped text aligns when padding is applied to the li element.</li>  <li>Final item with moderate length.</li></ol>

Accessibility tips

  • Ensure sufficient color contrast between the marker/text and background.
  • For long, nested, or complex lists consider using aria-label or descriptive headings to provide context to screen reader users.
  • Keep list item wording concise where possible; long paragraphs in list items can be harder to scan.

Variations and tweaks

  • To keep markers outside while still indenting content, replace list-inside with list-outside and add pl-6 to the ol instead of [li&]:pl-6.
  • For tighter spacing, use a smaller padding utility (e.g., pl-4).
  • For nested lists, apply different padding at deeper levels: ol > li > ol { … } via arbitrary selectors like [li&>ol]:pl-4.

Summary

list-inside list-decimal whitespace-normal [li&]:pl-6 is a concise Tailwind pattern for readable, numbered lists with wrapped lines that align neatly thanks to per-item padding. Use it when you need numbered steps or ordered content that remains legible across breakpoints.

Your email address will not be published. Required fields are marked *

More posts