You’re referring to Tailwind CSS utility classes and a selector-like pattern. Here’s a concise explanation and example.
- list-inside: Positions list markers (bullets/numbers) inside the content box.
- list-disc: Uses disc (filled circle) bullets for unordered lists.
- whitespace-normal: Collapses whitespace and wraps text normally.
- [li&]:pl-6: An arbitrary variant that targets the li element matched by the selector pattern; it applies padding-left: 1.5rem (pl-6) to the li when the variant condition matches. Specifically, ”[li&]” means “when an li is the parent of the current element” (the ampersand represents the current selector). In practice this variant is used on a parent to style its child element via the generated selector.
Example Tailwind markup (applies pl-6 to li elements inside the ul):
First item with extra left padding Second item Rendered effect:
- Bullets inside the content box
- Disc bullets
- Normal text wrapping
- Each li gets left padding 1.5rem from the arbitrary variant selector
Note: Arbitrary variants like [li_&]:pl-6 require Tailwind v3+ and a configured JIT mode; ensure your build supports arbitrary variants and the selector syntax.
Leave a Reply