You’re referencing Tailwind CSS utility classes and a selector pattern. Here’s a concise explanation:
- list-inside: Places list markers (bullets/numbers) inside the content box instead of outside. This affects marker positioning and text wrapping.
- list-disc: Sets the list-style-type to disc (solid circle bullet).
- whitespace-normal: Sets white-space to normal (collapses whitespace and allows wrapping).
- [li&]:pl-6 — This is a variant using Tailwind’s arbitrary variant syntax targeting a selector where the current element is appended to a parent selector. Interpreting ”[li&]:pl-6”:
- li is the parent selector (an li element) followed by the current selector (&).
- So it targets a child inside an li: in practice ”[li&]” becomes “li ”.
- pl-6 applies padding-left: 1.5rem (24px) when matched.
Example usage:
- If you have a utility class group on the ul element: ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”
- &]:pl-6” data-streamdown=“unordered-list”>
- For each li element matched by the variant, the li will receive pl-6 (padding-left: 1.5rem).
- The resulting compiled selector is like li . { padding-left: 1.5rem; } depending on build output.
Practical note:
- Use this when you want to add left padding to list items from the parent (ul) without adding classes to each li.
Leave a Reply