neuralstreamcore4.sbs

Top

Written by

ge9mHxiUqTAm

in

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

This article explains the CSS/Tailwind utility classes and the bracketed variant shown in the title: “list-inside list-disc whitespace-normal [li&]:pl-6”. It covers what each part does, why you might use them together, and practical examples.

What each utility does

  • list-inside — Places list markers (bullets) inside the content box so they align with text wrapping instead of hanging outside.
  • list-disc — Uses solid disc bullets for unordered lists.
  • whitespace-normal — Allows text to wrap normally; collapses whitespace and wraps at allowed break points.
  • [li&]:pl-6 — A Tailwind arbitrary variant that targets the element matching the selector produced by replacing the ampersand (&) with the parent selector; here it targets li& (a combined selector) to apply padding-left 1.5rem (pl-6) to a matched element. Practically, this is intended to apply left padding to li elements (or a custom selector) under certain parent contexts.

Why combine these

Combining these utilities gives you a list that:

  • Uses standard disc bullets,
  • Keeps bullets aligned with wrapped lines (list-inside),
  • Ensures long list item text wraps normally (whitespace-normal),
  • Adds consistent left padding to list items via a targeted variant, useful when you need extra spacing regardless of default browser indentation.

Practical examples

  1. Basic unordered list
html
<ul class=“list-inside list-disc whitespace-normal”><li class=”[li&]:pl-6”>A short item that wraps naturally when needed.</li>  <li class=”[li&]:pl-6”>A longer item that demonstrates how list-inside keeps the bullet aligned with wrapped lines and whitespace-normal lets the text wrap.</li></ul>
  1. Nested lists with extra spacing
html
<ul class=“list-inside list-disc whitespace-normal”>  <li class=”[li&]:pl-6”>Parent item    <ul class=“list-inside list-disc whitespace-normal”>      <li class=”[li&]:pl-6”>Child item with additional indentation.</li>    </ul>  </li></ul>

Notes and caveats

  • The bracketed variant syntax must match valid CSS selectors; ”[li_&]:pl-6” is nonstandard and may require adjusting to your setup. Common patterns to target child lis are ”[&>li]:pl-6” or ”[&li]:pl-6”.
  • Browser default list styling and user-agent styles can affect layout; use reset/normalize or explicit resets if you need consistent behavior across browsers.
  • If bullets still appear outside, try switching to list-inside with the desired padding, or use custom CSS to control marker position.

When to use this pattern

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

  • Content-heavy lists where wrapped lines must align with bullets.
  • UI components where precise control of indentation and wrapping is needed (documentation, sidebars, comments).
  • When you prefer Tailwind utilities over custom CSS for rapid consistent styling.

Quick reference

  • Use list-inside + list-disc for bullets inside text.
  • Use whitespace-normal to allow normal wrapping.

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

More posts