hyperdatamesh5.cfd

Written by

ge9mHxiUqTAm

in

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

This article explains what the Tailwind CSS utility combination list-inside list-decimal whitespace-normal [li&]:pl-6 does, when to use it, and practical examples for building readable, well-aligned ordered lists.

What each utility does

  • list-inside: Places the list marker (decimal number) inside the content box so the marker participates in line wrapping and sits within the list item’s padding.
  • list-decimal: Uses decimal numbering for ordered lists (1., 2., 3., …).
  • whitespace-normal: Ensures normal white-space handling — lines wrap as needed and consecutive whitespace collapses.
  • [li&]:pl-6: A variant selector using Tailwind’s arbitrary variant syntax that targets list item elements and applies padding-left: 1.5rem (pl-6) to each li. The [li&] selector ensures the rule is emitted for li children (selector becomes li .your-class or similar depending on placement) so numbers and text align consistently.

Why combine these utilities

  • Keeping markers inside (list-inside) prevents awkward hanging numbers and makes wrapping text align naturally with the number.
  • list-decimal is the expected marker style for ordered sequences.
  • whitespace-normal avoids preserved whitespace or no-wrap behavior that could break wrapping alignment.
  • Adding padding to li via [li&]:pl-6 creates horizontal space between the marker and the list content, improving legibility and preventing the marker from colliding with the first word, especially when wrapped.

When to use

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

  • Documents with multi-line list items where wrapped lines should align under the content rather than under the marker.
  • Content-heavy interfaces (documentation, tutorials, terms) where readability of numbered steps is important.
  • Cases where you need consistent left spacing for list items without adding wrapper elements or custom CSS files.

Examples

  1. Simple ordered list in a component
html
<ol class=“list-inside list-decimal whitespace-normal [li&]:pl-6”><li>Install the package using your package manager of choice.</li>  <li>Import the main module at the top of your file.</li>  <li>Initialize with the recommended configuration and run a test.</li></ol>
    &]:pl-6” data-streamdown=“ordered-list” start=“2”>

  1. Multi-line items (shows wrapping behavior
html
<ol class=“list-inside list-decimal whitespace-normal [li&]:pl-6 max-w-sm”>  <li>This is a long step that will wrap to multiple lines to demonstrate how wrapped lines align under the text rather than under the numeric marker.</li>  <li>Another long step that requires extra horizontal spacing to look visually balanced and readable.</li></ol>

Accessibility notes

  • Keep list content concise and use semantic
      and

    1. elements so screen readers announce the list structure and numbering correctly.
    2. Ensure sufficient contrast and font-size so numeric markers remain perceivable.
    3. Test with keyboard navigation and assistive tech to confirm the visual adjustments don’t interfere with focus outlines.

Troubleshooting

  • If numbers overlap content, increase pl-* value (e.g., [li&]:pl-8) or switch to list-outside with adjusted margins.
  • If the arbitrary variant selector doesn’t compile, confirm your Tailwind config allows arbitrary variants and your Tailwind version supports them.

Quick recipe

Use this combo for readable, wrapped ordered lists:

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

  • HTML:
      …

  • Tailwind: Ensure arbitrary variants are enabled; tweak pl- to match your design spacing scale.

That’s the concise guide to list-inside list-decimal whitespace-normal [li&]:pl-6.

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

More posts