dataprismcore2.sbs

Ultimate

Written by

pw

in

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

What the class string means

This title is a Tailwind CSS utility shorthand combining multiple classes that affect list appearance and spacing

  • list-inside — places list markers (bullets) inside the content box so bullets sit within the text block instead of hanging in the left margin.
  • list-disc — uses a filled circle (disc) as the list marker.
  • whitespace-normal — collapses whitespace and wraps text normally (respects line breaks and wraps long lines).
  • [li&]:pl-6 — an arbitrary variant that targets child li elements: it applies pl-6 (padding-left: 1.5rem) to each li. The & stands for the selected element (the li) and the li prefix scopes the variant so it only applies when an li is present.

When to use this combination

Use this set of utilities when you want a standard bulleted list whose bullets align inside the content area, with each list item indented from the bullet for clearer readability, and where text wraps normally. It’s useful for:

  • Documentation and long-form content with wrapped list items.
  • UI components where you want consistent left padding on every list item.
  • Ensuring bullets don’t hang outside a bordered or padded container.

How it affects layout (visual behavior)

  • Bullets appear next to the first line of each list item, not in the left margin.
  • Each list item has extra left padding so wrapped lines line up visually under the text, not under the bullet.
  • Normal whitespace handling prevents accidental preservation of extra spaces or forced line breaks.

Example HTML

html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item</li>  <li>This is a longer list item that will wrap to multiple lines so you can see how the padding aligns wrapped lines under the text rather than under the bullet.</li>  <li>Another item</li></ul>

Accessibility and responsiveness notes

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

  • The disc marker is widely supported and accessible to screen readers as a semantic list.
  • Ensure sufficient contrast between text and background; the list utilities don’t affect color.
  • Padding scales consistently across breakpoints; adjust pl-6 if you need different indentation on small screens (e.g., use responsive variants like sm:[li&]:pl-4).

Quick variants and alternatives

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

  • Use list-outside list-disc to have bullets in the left margin.
  • Swap list-decimal for numbered lists.
  • Replace [li&]:pl-6 with space-y-2 on the ul for vertical spacing between items instead of padding.

This combination gives readable, well-aligned bulleted lists ideal for documentation and interface content where wrapped lines must align neatly.

Comments

Leave a Reply

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

More posts