astralpacketcore1.xyz

How

Written by

ge9mHxiUqTAm

in

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

This article explains the CSS/Tailwind-style utility class string “list-inside list-decimal whitespace-normal [li&]:pl-6”: what each part does, when to use it, and practical examples.

What each part means

  • list-inside — Places list markers (numbers) inside the content box so they flow with the text and respect padding. Useful when you want markers aligned with list content rather than hanging to the left.
  • list-decimal — Uses decimal numbering (1., 2., 3.) for ordered lists (
      ).
      -​

Note: The exact meaning of the bracketed selector depends on build tooling and configuration. In Tailwind JIT, arbitrary variants like [li&]:pl-6 allow generating utilities scoped to complex selectors; the string here suggests applying pl-6 to the

  • within the component context.

    • Why combine these utilities

    Combining these classes gives a consistent, wrapped, and indented numbered list where the numbers sit inside the content flow and each list item has additional left padding. This is helpful for readable multi-line list items where wrapped lines align under the text rather than under the marker.

    HTML examples

    1. Basic ordered list with Tailwind classes:
    html
    <ol class=“list-inside list-decimal whitespace-normal”><li>Short item</li>  <li>Long item that wraps across multiple lines to demonstrate normal whitespace handling and alignment of wrapped text.</li></ol>
    1. With the arbitrary variant to add extra left padding to list items:
    html
    <div class=“prose”>  <ol class=“list-inside list-decimal whitespace-normal [li&]:pl-6”>    <li>First item with extra left padding.</li>    <li>Second item demonstrating wrapped text and improved readability on multiple lines thanks to pl-6.</li>  </ol></div>
      &]:pl-6” data-streamdown=“ordered-list” start=“3”>

    1. When you need marker alignment outside (contrast):
    html
    <ol class=“list-outside list-decimal”>  <li>Marker hangs outside, different visual style.</li></ol>

    Accessibility and responsiveness

    • Ensure sufficient contrast between text and background.
    • For narrow viewports, whitespace-normal helps wrapping but check padding values (pl-6) to avoid excessive horizontal squeeze; adjust with responsive utilities (e.g., md:pl-8 or sm:pl-4).
    • Use semantic
        and

    Troubleshooting

    • If the bracketed variant doesn’t apply, confirm your Tailwind config allows arbitrary variants and the build uses JIT mode.
    • If numbers still appear outside, check for conflicting CSS (e.g., list-style-position) or parent styles overriding padding.

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

    More posts