fluxstoragehub3.cyou

Tips

Written by

pw

in

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

What this utility class string does

This string is a group of Tailwind-like utility classes (or a custom utility shorthand) that together control list styling and spacing:

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

  • list-inside: Place list markers (bullets) inside the content box of each list item rather than outside.
  • list-disc: Use disc (filled circle) bullets for unordered lists
  • whitespace-normal: Collapse whitespace and wrap text normally inside list items.
  • [li&]:pl-6: Apply left padding (pl-6) to direct li elements — the bracketed arbitrary selector targets li elements and uses & to reference the parent selector, so each list item receives pl-6 (usually 1.5rem).

When to use this combination

  • You want bullets aligned with the first line of list content, not hanging in the margin.
  • You expect wrapped list items and want normal text wrapping without collapsing into a single line.
  • You need extra left padding on list items to create visual separation or to align nested content.

Example HTML

html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item.</li>  <li>Long item that will wrap onto multiple lines to demonstrate how whitespace-normal affects text wrapping in list items when combined with list-inside and extra left padding.</li>  <li>Another item with nested content:    <ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”>      <li>Nested short item.</li>      <li>Nested long item that also wraps to show consistent spacing.</li>    </ul>  </li></ul>

Notes and compatibility

  • The arbitrary selector syntax ([li&]:pl-6) is supported by Tailwind CSS v3+ when JIT mode or arbitrary variants are enabled; ensure your build supports it.
  • If not using Tailwind, achieve the same effect with CSS:
css
ul.custom-list { list-style-position: inside; list-style-type: disc; white-space: normal; }ul.custom-list > li { padding-left: 1.5rem; }

Quick tips

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

  • If bullets still appear misaligned, check global list-style and padding/margin resets from CSS frameworks
  • For more compact lists, replace list-disc with list-circle or list-none as needed

Comments

Leave a Reply

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

More posts