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

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

What it is

This is a set of Tailwind CSS utility classes combined with a bracketed variant selector that targets list items whose content begins with an ampersand (&). It configures a bulleted list with inside-positioned markers, normal whitespace handling, and extra left padding for matched list items.

Breakdown of the classes

list-inside — Places list markers (bullets) inside the content box so bullets are aligned with the first line of the list item.
list-disc — Uses solid disc bullets.
whitespace-normal — Allows normal wrapping and collapsing of whitespace (line breaks and spaces behave as usual).
[li&]:pl-6 — A bracketed variant that targets an li element whose content starts with ”&” (the underscore is the escaped space placeholder in Tailwind’s arbitrary variants); applies padding-left: 1.5rem (pl-6) to those matching li elements.

When to use this combination

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

You want compact bulleted lists where bullets align with wrapped lines.

Some list items start with a special character (like ”&“) and you need extra indentation for those items only.

You prefer CSS utilities over custom styles for quick, consistent layout.

Example HTML

html

<ul class=“list-inside list-disc whitespace-normal”><li>Normal item with wrapping text that will flow naturally across lines.</li> <li class=”[li&]:pl-6”>& Special item that needs extra left padding.</li> <li>Another normal item to show consistent spacing.</li></ul>

Notes and caveats

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

The bracketed variant syntax depends on your Tailwind configuration allowing arbitrary variants; ensure your Tailwind version supports this.

The exact matching behavior of [li&] may require escaping or different syntax depending on your build tool; check Tailwind’s docs if it doesn’t apply as expected.

If bullets still misalign on multiple lines, consider using list-outside with adjusted margins or apply marker:ml-… utilities (Tailwind v3.2+).

Alternatives

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

.special { padding-left: 1.5rem }) if arbitrary variants are unavailable.

marker utilities to fine-tune bullet positioning without changing li padding._