fluxstoragehub4.cfd

Office

Written by

pw

in

How to Use list-inside list-disc whitespace-normal [li&]:pl-6 in Tailwind CSS

This guide explains what each utility does and shows how to combine them to create a vertically compact bulleted list with normal text wrapping and extra left padding applied to list items using the Tailwind CSS JIT arbitrary selector syntax.

What each utility means

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

  • list-inside: Positions bullets inside the content box so the bullet sits inside the text block rather than hanging in the margin.
  • list-disc: Uses solid disc bullets.
  • whitespace-normal: Allows normal text wrapping (collapses whitespace and wraps text onto the next line).
  • [li&]:pl-6: An arbitrary selector that targets each direct list item (li) and applies left padding of 1.5rem (pl-6). The pattern uses the JIT arbitrary selector form where li& becomes li >-style targeting—effectively adding padding to list items.

Example HTML

html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”>  <li>Short item</li>  <li>A longer list item that will wrap onto multiple lines to demonstrate normal whitespace handling and inner bullet alignment.</li>  <li>Another item</li></ul>

Resulting behavior

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

  • Bullets render inside the content box.
  • Items use disc bullets.
  • Long items wrap naturally without preserving extra spaces.
  • Each
  • gets left padding (pl-6), shifting the text to the right while keeping bullets inside the padded area.

Notes and compatibility

  • The arbitrary selector syntax ([li_&]:pl-6) requires Tailwind CSS JIT (v2.2+ with JIT or v3+).
  • If the selector doesn’t work as written for your Tailwind version, use a simple utility on the
  • elements instead:
html
<ul class=“list-inside list-disc whitespace-normal”>  <li class=“pl-6”>…</li></ul>

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

More posts