neuralstreamcore4.sbs

Mastering

Written by

ge9mHxiUqTAm

in

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

This article explains a Tailwind CSS utility class combination: “list-inside list-disc whitespace-normal [li&]:pl-6”. It shows what each part does, why you might use them together, and practical examples and accessibility tips.

What each utility does

  • list-inside: Places list markers (bullets) inside the content box so markers are part of the flow.
  • list-disc: Uses filled circle bullets for unordered lists.
  • whitespace-normal: Collapses sequences of whitespace and allows normal wrapping of text; prevents long strings from forcing overflow.
  • [li&]:pl-6: A variant applying padding-left: 1.5rem (pl-6) to every li descendant via arbitrary variant syntax; it expands the left padding of each list item for visual indentation while keeping the marker placement.

Why combine them

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

  • Using list-inside with list-disc makes bullets appear inline with text, useful for compact lists.
  • whitespace-normal ensures long content wraps naturally inside list items.
  • Applying pl-6 to li elements increases readable indentation without moving the bullets outside the content box, maintaining visual rhythm and alignment across wrapped lines.

Example HTML

html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item</li>  <li>A longer list item that wraps onto multiple lines to demonstrate how the marker and content align when whitespace-normal and pl-6 are applied.</li>  <li>Item with a <a href=”#”>link</a> and inline code <code>const x = 1;</code>.</li></ul>

When to use

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

  • Compact layouts where you want bullets inside the content area.
  • Multi-line list items where consistent indentation across lines improves readability.
  • UI components where you need per-li padding without adding extra wrapper classes.

Accessibility tips

  • Ensure sufficient contrast for list text and links.
  • Avoid relying solely on visual indentation to convey hierarchy; use semantic lists and headings.
  • For complex nested lists, consider using list-outside with clear nesting markers to aid screen reader users.

Variations

  • For outside markers: replace list-inside with list-outside.
  • For different bullet style: use list-decimal or custom markers with marker-* utilities.
  • Adjust indentation: change pl-6 to another spacing value like pl-4 or pl-8.

Quick checklist

  • Use semantic
      /

        and

      1. .
      2. Apply

This combination gives compact, readable lists with controlled wrapping and consistent indentation for multi-line items._

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

More posts