p]:inline” data-streamdown=”list-item”>EZ Dictionary English–French: Pocket Guide for Travelers

This utility combination configures a nested list so its bullets appear inside, line wraps behave normally, and list items receive a specific left padding using a custom selector. Use it when you need readable, wrapped list items with controlled indentation for nested or specially targeted li elements.

What each part does

&]:pl-6” data-streamdown=“unordered-list”>
• list-inside — places bullets/markers inside the content box so wrapped lines align under the text (not the marker).
• list-disc — uses filled circle bullets.
• whitespace-normal — allows text to wrap normally across lines
• [li&]:pl-6 — a variant using Tailwind’s arbitrary selector syntax that targets an li element when it is the parent selector (&) — applying left padding of 1.5rem (pl-6) to that li.

When to use

• Long list items that need to wrap onto multiple lines without misaligned bullets.
• Nested lists where inner items need consistent left padding.
• Cases where you want to target only li elements with a custom selector (e.g., inside a specific component or utility wrapper).

Example HTML

<ul class=“list-inside list-disc whitespace-normal”><li class=”[li&]:pl-6”>    This is a long list item that will wrap onto multiple lines and the bullet will remain inside the content flow.  </li>  <li class=”[li&]:pl-6”>    Another item demonstrating consistent indentation for the li element.  </li></ul>

Notes and tips

• If bullets still misalign on wrapping, try combining with block-level formatting or adjust padding/margin on the li.
• For nested lists, add the same utilities to inner ul/ol elements to keep consistent wrapping and markers.
• The arbitrary selector ([li&]:pl-6) depends on how Tailwind processes the selector — ensure your Tailwind configuration allows arbitrary variants.