cosmicrelayhub5.xyz

Pro:

Written by

ge9mHxiUqTAm

in

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

This article explains the utility and use of the Tailwind CSS class combination shown in the title: list-inside list-decimal whitespace-normal [li&]:pl-6. It’s a compact pattern for styling ordered lists and their list items with predictable numbering, spacing, and indentation — useful when you need consistent numbered lists in responsive layouts or content-heavy pages.

What each class does

  • list-inside — Places the list marker (the decimal number) inside the content box of the list item rather than outside; the marker becomes part of the inline flow, which affects wrapping and alignment.
  • list-decimal — Uses decimal numbers for ordered lists (1., 2., 3., …).
  • whitespace-normal — Ensures text within list items wraps normally. This prevents awkward overflow or preserved whitespace from breaking layout.
  • [li&]:pl-6 — This is a Tailwind arbitrary variant that targets the list item selector (li) within the current scope and applies left padding of 1.5rem (pl-6) to each li. It increases the distance between the marker and the list content for clearer readability.

Why combine these classes

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

  • Improved readability: With the marker inside and li padded, multi-line items align nicely and the numbering stays visually connected to the content.
  • Predictable wrapping: whitespace-normal prevents collapsed or unwrapped content when list items contain long lines, code snippets, or inline elements.
  • Scoped control: The arbitrary variant [li&]:pl-6 lets you apply padding specifically to li without needing extra CSS, keeping styles encapsulated in utility classes.

When to use this pattern

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

  • Long list items that wrap to multiple lines (e.g., documentation, terms, FAQs).
  • Content where you want consistent indentation across breakpoints.
  • When you prefer utility-first styling and want to avoid writing custom CSS just for list padding.

Example HTML

html
<ol class=“list-inside list-decimal whitespace-normal [li&]:pl-6”><li>This is a short item.</li>  <li>This is a longer list item that will wrap onto multiple lines to demonstrate how the number aligns with the padded content when using list-inside and pl-6 on the list item.</li>  <li>Another item with inline <code>code</code> and links to show wrapping behavior.</li></ol>

Accessibility notes

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

  • Ensure sufficient contrast and clear focus styles for interactive elements inside list items.
  • For complex lists, consider adding aria-describedby or headings to help screen reader users navigate long list content.

Variations and tips

  • If you prefer the marker outside, swap list-inside with list-outside.
  • Adjust spacing: use other padding utilities like pl-4 or pl-8 depending on your typographic scale.
  • For unordered lists, replace list-decimal with list-disc or list-none.
  • md:[li&]:pl-8) to change indentation on larger screens.

This combination is a concise, utility-first way to make numbered lists look clean and behave consistently across content types.

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

More posts