fluxstoragehub5.sbs

vs

Written by

pw

in

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

This article explains the Tailwind CSS utility combination shown in the class string list-inside list-disc whitespace-normal [li&]:pl-6, what each part does, when to use it, accessibility considerations, and example usage.

What the utilities mean

  • list-inside: Positions list markers (bullets) inside the element’s content box so the marker is placed inline with the first line of the list item instead of hanging outside.
  • list-disc: Uses filled-circle bullets for unordered lists.
  • whitespace-normal: Restores normal white-space handling: lines wrap, sequences of whitespace collapse, and newlines are honored as usual.
  • [li&]:pl-6: A bracketed arbitrary selector applying pl-6 (padding-left: 1.5rem) to list item elements (li) that are descendants of the element the classes are applied to. The selector pattern li& targets li where the parent (the &) is the current class container; in practice this results in CSS similar to .your-class li { padding-left: 1.5rem; }. (This is useful when you want per-item padding without changing the list marker placement.)

Why combine these

  • Putting bullets inside (list-inside) often visually aligns content better in narrow layouts or when list items wrap to multiple lines.
  • list-disc sets the desired marker style.
  • whitespace-normal ensures wrapped lines behave predictably (useful if your content includes long words or dynamic text).
  • The arbitrary selector [li&]:pl-6 gives fine-grained control over item padding so wrapped lines have an indent that aligns with the text, not the marker, creating a neat visual block.

Practical examples

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

  1. Basic unordered list with wrapped items
    HTML:
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>This is a long list item that will wrap to multiple lines so you can see the effect of padding and inside markers.</li>  <li>Short item</li></ul>

Result: bullets appear inline with the first line, wrapped lines are indented by 1.5rem so they align under the text, and whitespace wraps normally.

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

  1. When you want tighter list marker placement
    If you prefer the marker inside but want more space between marker and text, increase the padding:
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-8”>  <li>Item with extra gap between bullet and text.</li></ul>
    &]:pl-6” data-streamdown=“ordered-list” start=“3”>

  1. Combining with typography utilities
    Use alongside text utilities for consistent sizing:
html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6 text-sm leading-6”>  <li>Smaller text with controlled line-height for dense lists.</li></ul>

Accessibility notes

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

  • Ensure sufficient contrast between marker and background — markers inherit color from text, so set a readable text color.
  • For long, multi-sentence list items, consider grouping content within the li using paragraphs or sublists to preserve semantics.
  • Screen readers rely on semantic list markup (ul/ol and li) rather than visual alignment; these utilities only affect presentation.

When not to use this pattern

  • If you need hanging indents where bullets sit outside and wrapped lines align with the text start, use list-outside with appropriate left margin instead.
  • If you target very old browsers or nonstandard CSS environments where arbitrary selectors aren’t processed, the [li&]:pl-6 trick may not work.

Summary

list-inside list-disc whitespace-normal [li&]:pl-6 is a lightweight Tailwind combination for tidy, wrapped unordered lists with inside bullets and consistent wrapped-line indentation. Adjust the padding value to tune the visual gap between marker and text._

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

More posts