You’re referencing Tailwind CSS utility classes and a selector pattern. Briefly:
- list-inside: Positions list-marker (bullet/number) inside the content box so markers are part of the flow and indent with the text.
- list-disc: Uses a filled circle (disc) as the list marker type.
- whitespace-normal: Collapses sequences of whitespace and allows wrapping (default whitespace behavior).
- [li&]:pl-6 — This is a Tailwind arbitrary variant using a selector: it targets an element where the current component (represented by &) is a descendant of an li element matching the attribute selector li. In effect, it applies padding-left: 1.5rem (pl-6) when the component is inside an li element that has attribute li. Example generated CSS:
li[li] .your-class { padding-left: 1.5rem; }
Notes: - The exact selector depends on where you place the variant; if used on a utility class (e.g., [li&]:pl-6 on a child), Tailwind emits a rule with li[li] as the parent and & replaced by the class.
Leave a Reply