stellarbackupnode1.homes

Merging

Written by

pw

in

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

This article explains the Tailwind CSS utility classes shown in the title and demonstrates when and how to use them together to control list appearance and spacing.

What each class does

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

  • list-inside: Places list markers (bullets) inside the content box so they align with the first line of text rather than hanging outside.
  • list-disc: Uses filled circle bullets (disc) for unordered lists.
  • whitespace-normal: Allows text to wrap normally (collapses sequences of whitespace and breaks lines as needed). Useful when list items contain long text that should wrap.
  • [li&]:pl-6: Applies left padding (pl-6) to each direct li element via Tailwind’s arbitrary selector feature; the underscore represents the combinator placeholder and & targets the li itself. This shifts list item content to the right, creating space between the bullet and the item text.

Why combine them

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

  • Use list-inside with list-disc when you want standard bullets but prefer bullets to sit within the content flow (better for multi-line items).
  • Add whitespace-normal to ensure wrapped lines break naturally inside items.
  • Use the arbitrary selector [li&]:pl-6 to increase the gap between the bullet and the text without affecting the marker position globally — this is helpful when default spacing feels tight or when using custom fonts/sizes.

Example patterns and use-cases

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

  1. Short items that wrap
    • Use: list-inside list-disc whitespace-normal [li&]:pl-6
    • Why: bullets remain aligned with the first line; wrapped lines align under the text, not the bullet.
  2. Dense UI lists (compact but readable)

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

    • Use: list-inside list-disc [li&]:pl-4
    • Why: modest padding keeps layout compact while improving readability.
  3. Long paragraphs per item

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

    • Use: list-inside list-disc whitespace-normal [li&]:pl-8
    • Why: larger padding keeps long wrapped lines visually separated from bullets.

Accessibility considerations

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

  • Ensure sufficient contrast for list text and surrounding UI.
  • Keep bullet markers visible—if custom styling hides markers, provide an alternative visual cue.
  • Maintain logical reading order; do not use these utilities to visually reorder list content.

Quick implementation example (HTML with Tailwind)

html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item that wraps across multiple lines to show alignment behavior.</li>  <li>Another list item with longer text to demonstrate normal wrapping and padded content.</li>  <li>Compact item.</li></ul>

Tips

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

  • If you prefer hanging bullets, remove list-inside (Tailwind default is list-outside).
  • Adjust the pl- value to tune the gap for your font size and layout.
  • Test on mobile to ensure wrapped lines remain readable

This combination gives precise control over list marker placement, text wrapping, and spacing — useful for readable, polished lists in component-driven designs.*

Comments

Leave a Reply

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

More posts