fluxstoragehub5.sbs

Your

Written by

pw

in

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

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

What each utility does

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

  • list-inside — Places list markers (bullets) inside the content box so they flow with the text instead of hanging outside. Use when you want bullets to align with wrapped lines.
  • list-disc — Sets the list-style to filled circles (discs). Common for unordered lists.
  • whitespace-normal — Allows normal wrapping of whitespace and line breaks; prevents preserving extra spaces or forcing nowrap.
  • [li&]:pl-6 — A Tailwind arbitrary variant that targets the list item itself and applies padding-left: 1.5rem (pl-6) to the item. The selector li& places the li before the component selector (so it compiles to li .your-class when used on a parent), effectively applying padding to list items via the parent class. This is useful when you want to control item padding from the list container rather than adding classes to each li.

Why combine them

  • Ensures bullets sit inside and align with wrapped lines (list-inside + whitespace-normal).
  • Keeps list marker style consistent (list-disc).
  • Applies consistent left padding to items from the parent ([li&]:pl-6), which is helpful when you render list items from markup you can’t modify or when you want central control of spacing.

Common use cases

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

  • Styling CMS-generated lists where you can’t add classes to individual li elements.
  • Creating compact lists where bullets and wrapped text align neatly
  • Applying spacing control from a parent container in component libraries.

Example HTML

html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item</li>  <li>Long item that wraps onto multiple lines to show how the bullet and text align when whitespace-normal is used and padding is applied.</li>  <li>Another item</li></ul>

Notes & gotchas

  • Browser behavior: list-inside moves bullets inside the content box which can change alignment compared with list-outside. Test in your target browsers.
  • Specificity: Arbitrary variants like [li&]:pl-6 depend on your Tailwind configuration and JIT processing; ensure your build supports them.
  • If you need the bullet outside but want the same left spacing for wrapped lines, use list-outside and add left padding to the ul instead, or target li directly.

Quick alternatives

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

  • If you can edit li elements: add pl-6 directly to each li.
  • To keep bullets outside but space text: use list-outside plus pl-6 on ul and adjust text-indent as needed.

This combination is a concise and powerful way to control list marker placement, wrapping behavior, and item padding from the parent container.

Comments

Leave a Reply

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

More posts