dataprismcore3.cfd

Shortcuts,

Written by

pw

in

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

This article explains the Tailwind CSS utility combination list-inside list-disc whitespace-normal [li&]:pl-6, what each part does, when to use it, and practical examples.

What each utility does

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

  • list-inside: Places list markers (bullets) inside the content box so bullets are part of the text flow rather than hanging outside.
  • list-disc: Uses filled circle bullets for list items.
  • whitespace-normal: Collapses whitespace and wraps text normally (default wrapping behavior), ensuring long lines break to fit the container.
  • [li&]:pl-6: A variant using Tailwind’s arbitrary selector syntax. It applies pl-6 (padding-left: 1.5rem) to each li element when the parent selector matches the variant pattern. Specifically, [li&]:pl-6 targets li elements using a selector where li is positioned before the parent (&) in the generated selector; effectively it results in styling list items with left padding to align multi-line content under the bullet.

Why combine these utilities

  • Keeps bullets inside the content area so wrapped lines align predictably.
  • Adds consistent left padding to list items so wrapped text lines up neatly beneath the bullet.
  • Ensures normal wrapping behavior for readable paragraphs inside list items.
  • Useful when list items contain long text, inline elements, or nested content that should align clearly.

When to use

  • Long list items that wrap to multiple lines.
  • Lists containing inline code, badges, or other elements that need spacing.
  • When you want bullets to appear inside the text block and need extra left padding for visual alignment.

Example HTML

html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>This is a short item.</li>  <li>    This is a very long list item that will wrap to multiple lines so you can    see how the padding and inside-list marker work together to align wrapped text neatly.  </li>  <li>Item with <span class=“font-semibold”>inline emphasis</span> that still lines up.</li></ul>

Notes and browser behavior

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

  • Tailwind’s arbitrary selector [li&]:pl-6 compiles to a specific CSS selector; ensure your Tailwind configuration allows arbitrary variants and the feature set used.
  • If markers still misalign in some browsers, consider using list-inside with pl-6 on the li directly (li:pl-6) or adjust marker styles via ::marker for fine control:
css
ul.custom-list li::marker { font-size: 1rem; }
    &]:pl-6” data-streamdown=“unordered-list”>

  • For nested lists, check how padding accumulates and adjust with responsive or nested variants as needed.

Quick reference

  • Use when: multilined list items need clean alignment.
  • Key effect: bullets inside content + extra left padding for li elements + normal wrapping.

This combination gives readable, well-aligned lists for content-rich list items._

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

More posts