You’re asking about a utility that looks like Tailwind CSS syntax: “list-inside list-decimal whitespace-normal [li&]:pl-6”. Here’s what each part does and how to use it.
- &]:pl-6” data-streamdown=“unordered-list”>
- list-inside — Place list-item markers (bullets/numbers) inside the content box instead of hanging outside; markers become part of the content flow.
- list-decimal — Use decimal (1., 2., 3.) numbering for ordered lists.
- whitespace-normal — Collapse whitespace and wrap text normally (default text-wrapping behavior).
- [li&]:pl-6 — Arbitrary variant targeting child li elements: add padding-left 1.5rem (pl-6) to each li. The selector form li& means “select li that is a descendant of the element this class is applied to.” In Tailwind JIT arbitrary variants syntax, this compiles to a CSS rule like:
.your-class :is(li) { padding-left: 1.5rem; }(Exact output may vary by Tailwind version and plugin support.)
Usage example (Tailwind HTML):
First item Second item Notes and caveats:
- Arbitrary variants require Tailwind JIT and may need enabling in your Tailwind config; older Tailwind versions don’t support this syntax.
- Browser CSS specificity and PostCSS processing can affect the generated selector; test in your build.
Leave a Reply