You’re referring to Tailwind CSS utility classes and a variant selector pattern. Here’s a concise explanation and example.
- list-inside: Places list markers (bullets/numbers) inside the content box so text wraps under the marker.
- list-disc: Uses a filled circle (disc) as the list marker.
- whitespace-normal: Allows normal text wrapping and collapses whitespace.
- [li&]:pl-6 — this is a Tailwind arbitrary variant targeting a child li when combined with a parent selector. It means “for li elements inside the current selector, apply padding-left: 1.5rem (pl-6).” The pattern li& swaps the role of & (the current selector) and li so the compiled selector becomes li . Example usage:
If you have
Example HTML (recommended common alternative):
- First item with extra left padding
- Second item
Notes:
- Browser behavior: list-inside places bullet inside the content box so padding affects marker placement.
- Use [&>li]:pl-6 to apply padding to direct child li elements; use [li_&]:pl-6 only when you need to target a selector where li is the parent of the current element (rare).
Leave a Reply