dataprismcore2.cfd

to

Written by

pw

in

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

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 for real layouts.

What it means (breakdown)

  • list-inside — Places the list marker (disc) inside the content box so the bullet appears within the text flow rather than hanging in the left margin. Useful when list items need to wrap without extra hanging indent.
  • list-disc — Uses a filled circle (disc) as the list marker. Use for unordered lists to show standard bullets.
  • whitespace-normal — Restores normal whitespace handling: collapses sequences of whitespace and allows wrapping. Ensures long list-item text wraps onto multiple lines instead of overflowing.
  • [li&]:pl-6 — Uses Tailwind’s arbitrary selector feature to apply padding-left: 1.5rem (pl-6) to each direct li child. The selector [li&] targets the li element when used on the parent list (the ampersand stands for the parent selector). This adds space between the bullet and the content, creating a clearer visual gap especially when list-inside places the marker inside the content box.

Why combine these utilities

  • When you want standard bullets that stay visually attached to wrapped text, list-inside list-disc whitespace-normal makes items wrap cleanly while keeping the marker inside.
  • Adding [li&]:pl-6 offsets the text from the marker so wrapped lines align neatly and maintain good readability.
  • This combo is handy in components with constrained widths (cards, sidebars, mobile layouts) where hanging bullets or text overflow would look messy.

Practical examples

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

  1. Compact card list
  • Use the utilities on a UL inside a narrow card to keep bullets inside and prevent overflow. The pl-6 on li ensures wrapped lines line up with the start of content, not the bullet.
  1. Settings or feature lists
  • For descriptive items with longer text, these classes ensure bullets remain visible and text wraps cleanly across lines without odd indentation.
  1. Accessibility and spacing
  • The added padding improves hit area and readability for screen magnifiers; whitespace-normal prevents unexpected nowrap behavior from upstream styles

Example HTML

html
<

Comments

Leave a Reply

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

More posts